From 62a47f95b1e4749b40dd3fa21187fac245f55462 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 13 Nov 2020 19:41:08 -0500 Subject: [PATCH] Properly support colors as closures with ring utilities --- .../fixtures/tailwind-output-flagged.css | 54 +++++++------------ .../fixtures/tailwind-output-important.css | 54 +++++++------------ .../tailwind-output-no-color-opacity.css | 54 +++++++------------ __tests__/fixtures/tailwind-output.css | 54 +++++++------------ __tests__/plugins/ringColor.test.js | 29 ++++++++++ __tests__/plugins/ringOffsetColor.test.js | 28 ++++++++++ src/plugins/ringColor.js | 30 +++++------ src/plugins/ringOffsetColor.js | 3 +- 8 files changed, 143 insertions(+), 163 deletions(-) create mode 100644 __tests__/plugins/ringColor.test.js create mode 100644 __tests__/plugins/ringOffsetColor.test.js diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index 036d25895a89..0941f4cf60c5 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -20972,8 +20972,7 @@ video { } .ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .ring-current { @@ -21391,8 +21390,7 @@ video { } .focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .focus-within\:ring-current:focus-within { @@ -21810,8 +21808,7 @@ video { } .focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .focus\:ring-current:focus { @@ -49785,8 +49782,7 @@ video { } .sm\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .sm\:ring-current { @@ -50204,8 +50200,7 @@ video { } .sm\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .sm\:focus-within\:ring-current:focus-within { @@ -50623,8 +50618,7 @@ video { } .sm\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .sm\:focus\:ring-current:focus { @@ -78568,8 +78562,7 @@ video { } .md\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .md\:ring-current { @@ -78987,8 +78980,7 @@ video { } .md\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .md\:focus-within\:ring-current:focus-within { @@ -79406,8 +79398,7 @@ video { } .md\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .md\:focus\:ring-current:focus { @@ -107351,8 +107342,7 @@ video { } .lg\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .lg\:ring-current { @@ -107770,8 +107760,7 @@ video { } .lg\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .lg\:focus-within\:ring-current:focus-within { @@ -108189,8 +108178,7 @@ video { } .lg\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .lg\:focus\:ring-current:focus { @@ -136134,8 +136122,7 @@ video { } .xl\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .xl\:ring-current { @@ -136553,8 +136540,7 @@ video { } .xl\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .xl\:focus-within\:ring-current:focus-within { @@ -136972,8 +136958,7 @@ video { } .xl\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .xl\:focus\:ring-current:focus { @@ -164917,8 +164902,7 @@ video { } .\32xl\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .\32xl\:ring-current { @@ -165336,8 +165320,7 @@ video { } .\32xl\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .\32xl\:focus-within\:ring-current:focus-within { @@ -165755,8 +165738,7 @@ video { } .\32xl\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .\32xl\:focus\:ring-current:focus { diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 6dba1b685d11..0fb8143de475 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -20972,8 +20972,7 @@ video { } .ring-transparent { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .ring-current { @@ -21391,8 +21390,7 @@ video { } .focus-within\:ring-transparent:focus-within { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .focus-within\:ring-current:focus-within { @@ -21810,8 +21808,7 @@ video { } .focus\:ring-transparent:focus { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .focus\:ring-current:focus { @@ -49785,8 +49782,7 @@ video { } .sm\:ring-transparent { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .sm\:ring-current { @@ -50204,8 +50200,7 @@ video { } .sm\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .sm\:focus-within\:ring-current:focus-within { @@ -50623,8 +50618,7 @@ video { } .sm\:focus\:ring-transparent:focus { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .sm\:focus\:ring-current:focus { @@ -78568,8 +78562,7 @@ video { } .md\:ring-transparent { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .md\:ring-current { @@ -78987,8 +78980,7 @@ video { } .md\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .md\:focus-within\:ring-current:focus-within { @@ -79406,8 +79398,7 @@ video { } .md\:focus\:ring-transparent:focus { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .md\:focus\:ring-current:focus { @@ -107351,8 +107342,7 @@ video { } .lg\:ring-transparent { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .lg\:ring-current { @@ -107770,8 +107760,7 @@ video { } .lg\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .lg\:focus-within\:ring-current:focus-within { @@ -108189,8 +108178,7 @@ video { } .lg\:focus\:ring-transparent:focus { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .lg\:focus\:ring-current:focus { @@ -136134,8 +136122,7 @@ video { } .xl\:ring-transparent { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .xl\:ring-current { @@ -136553,8 +136540,7 @@ video { } .xl\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .xl\:focus-within\:ring-current:focus-within { @@ -136972,8 +136958,7 @@ video { } .xl\:focus\:ring-transparent:focus { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .xl\:focus\:ring-current:focus { @@ -164917,8 +164902,7 @@ video { } .\32xl\:ring-transparent { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .\32xl\:ring-current { @@ -165336,8 +165320,7 @@ video { } .\32xl\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .\32xl\:focus-within\:ring-current:focus-within { @@ -165755,8 +165738,7 @@ video { } .\32xl\:focus\:ring-transparent:focus { - --ring-opacity: 0 !important; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important; + --ring-color: transparent !important; } .\32xl\:focus\:ring-current:focus { diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index 36f70276c069..8489d12b8646 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -19126,8 +19126,7 @@ video { } .ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .ring-current { @@ -19545,8 +19544,7 @@ video { } .focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .focus-within\:ring-current:focus-within { @@ -19964,8 +19962,7 @@ video { } .focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .focus\:ring-current:focus { @@ -45383,8 +45380,7 @@ video { } .sm\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .sm\:ring-current { @@ -45802,8 +45798,7 @@ video { } .sm\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .sm\:focus-within\:ring-current:focus-within { @@ -46221,8 +46216,7 @@ video { } .sm\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .sm\:focus\:ring-current:focus { @@ -71610,8 +71604,7 @@ video { } .md\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .md\:ring-current { @@ -72029,8 +72022,7 @@ video { } .md\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .md\:focus-within\:ring-current:focus-within { @@ -72448,8 +72440,7 @@ video { } .md\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .md\:focus\:ring-current:focus { @@ -97837,8 +97828,7 @@ video { } .lg\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .lg\:ring-current { @@ -98256,8 +98246,7 @@ video { } .lg\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .lg\:focus-within\:ring-current:focus-within { @@ -98675,8 +98664,7 @@ video { } .lg\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .lg\:focus\:ring-current:focus { @@ -124064,8 +124052,7 @@ video { } .xl\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .xl\:ring-current { @@ -124483,8 +124470,7 @@ video { } .xl\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .xl\:focus-within\:ring-current:focus-within { @@ -124902,8 +124888,7 @@ video { } .xl\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .xl\:focus\:ring-current:focus { @@ -150291,8 +150276,7 @@ video { } .\32xl\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .\32xl\:ring-current { @@ -150710,8 +150694,7 @@ video { } .\32xl\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .\32xl\:focus-within\:ring-current:focus-within { @@ -151129,8 +151112,7 @@ video { } .\32xl\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .\32xl\:focus\:ring-current:focus { diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 036d25895a89..0941f4cf60c5 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -20972,8 +20972,7 @@ video { } .ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .ring-current { @@ -21391,8 +21390,7 @@ video { } .focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .focus-within\:ring-current:focus-within { @@ -21810,8 +21808,7 @@ video { } .focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .focus\:ring-current:focus { @@ -49785,8 +49782,7 @@ video { } .sm\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .sm\:ring-current { @@ -50204,8 +50200,7 @@ video { } .sm\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .sm\:focus-within\:ring-current:focus-within { @@ -50623,8 +50618,7 @@ video { } .sm\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .sm\:focus\:ring-current:focus { @@ -78568,8 +78562,7 @@ video { } .md\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .md\:ring-current { @@ -78987,8 +78980,7 @@ video { } .md\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .md\:focus-within\:ring-current:focus-within { @@ -79406,8 +79398,7 @@ video { } .md\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .md\:focus\:ring-current:focus { @@ -107351,8 +107342,7 @@ video { } .lg\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .lg\:ring-current { @@ -107770,8 +107760,7 @@ video { } .lg\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .lg\:focus-within\:ring-current:focus-within { @@ -108189,8 +108178,7 @@ video { } .lg\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .lg\:focus\:ring-current:focus { @@ -136134,8 +136122,7 @@ video { } .xl\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .xl\:ring-current { @@ -136553,8 +136540,7 @@ video { } .xl\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .xl\:focus-within\:ring-current:focus-within { @@ -136972,8 +136958,7 @@ video { } .xl\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .xl\:focus\:ring-current:focus { @@ -164917,8 +164902,7 @@ video { } .\32xl\:ring-transparent { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .\32xl\:ring-current { @@ -165336,8 +165320,7 @@ video { } .\32xl\:focus-within\:ring-transparent:focus-within { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .\32xl\:focus-within\:ring-current:focus-within { @@ -165755,8 +165738,7 @@ video { } .\32xl\:focus\:ring-transparent:focus { - --ring-opacity: 0; - --ring-color: rgba(0, 0, 0, var(--ring-opacity)); + --ring-color: transparent; } .\32xl\:focus\:ring-current:focus { diff --git a/__tests__/plugins/ringColor.test.js b/__tests__/plugins/ringColor.test.js new file mode 100644 index 000000000000..b8a271e43897 --- /dev/null +++ b/__tests__/plugins/ringColor.test.js @@ -0,0 +1,29 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/ringColor' + +test('defining color as a function', () => { + const config = { + theme: { + ringColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + ringColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.ring-black': { + '--ring-opacity': '1', + '--ring-color': 'black', + }, + }, + [], + ], + ]) +}) diff --git a/__tests__/plugins/ringOffsetColor.test.js b/__tests__/plugins/ringOffsetColor.test.js new file mode 100644 index 000000000000..38969906bbd3 --- /dev/null +++ b/__tests__/plugins/ringOffsetColor.test.js @@ -0,0 +1,28 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/ringOffsetColor' + +test('defining color as a function', () => { + const config = { + theme: { + ringOffsetColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + ringOffsetColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.ring-offset-black': { + '--ring-offset-color': 'black', + }, + }, + [], + ], + ]) +}) diff --git a/src/plugins/ringColor.js b/src/plugins/ringColor.js index fbb8e9fd487a..bf9b5082dbbe 100644 --- a/src/plugins/ringColor.js +++ b/src/plugins/ringColor.js @@ -1,32 +1,26 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' import nameClass from '../util/nameClass' -import { toRgba } from '../util/withAlphaVariable' +import withAlphaVariable from '../util/withAlphaVariable' export default function () { return function ({ addUtilities, theme, variants }) { const colors = flattenColorPalette(theme('ringColor')) + + const getProperties = (value) => { + return withAlphaVariable({ + color: value, + property: '--ring-color', + variable: '--ring-opacity', + }) + } + const utilities = _.fromPairs( _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => { - try { - const [r, g, b, a] = toRgba(value) - return [ - nameClass('ring', modifier), - { - '--ring-opacity': a === undefined ? '1' : a, - '--ring-color': `rgba(${r}, ${g}, ${b}, var(--ring-opacity))`, - }, - ] - } catch (_error) { - return [ - nameClass('ring', modifier), - { - '--ring-color': value, - }, - ] - } + return [nameClass('ring', modifier), getProperties(value)] }) ) + addUtilities(utilities, variants('ringColor')) } } diff --git a/src/plugins/ringOffsetColor.js b/src/plugins/ringOffsetColor.js index d9429947567f..53e16d2fdcb6 100644 --- a/src/plugins/ringOffsetColor.js +++ b/src/plugins/ringOffsetColor.js @@ -1,6 +1,7 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' import nameClass from '../util/nameClass' +import toColorValue from '../util/toColorValue' export default function () { return function ({ addUtilities, theme, variants }) { @@ -10,7 +11,7 @@ export default function () { return [ nameClass('ring-offset', modifier), { - '--ring-offset-color': value, + '--ring-offset-color': toColorValue(value), }, ] })