Handle ringColor.DEFAULT in js configs

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Skip over arbitrary property utilities with a top-level `!` in the value ([#19243](https://github.com/tailwindlabs/tailwindcss/pull/19243))
 - Support environment API in `@tailwindcss/vite` ([#18970](https://github.com/tailwindlabs/tailwindcss/pull/18970))
 - Preserve case of theme keys from JS configs and plugins ([#19337](https://github.com/tailwindlabs/tailwindcss/pull/19337))
+- Handle `ringColor.DEFAULT` in JS configs ([#19348](https://github.com/tailwindlabs/tailwindcss/pull/19348))
 - Upgrade: Handle `future` and `experimental` config keys ([#19344](https://github.com/tailwindlabs/tailwindcss/pull/19344))
 
 ### Added

integrations/upgrade/js-config.test.ts

@@ -34,6 +34,9 @@ test(
               steel: 'rgb(70 130 180 / <alpha-value>)',
               smoke: 'rgba(245, 245, 245, var(--smoke-alpha, <alpha-value>))',
             },
+            ringColor: {
+              DEFAULT: '#c0ffee',
+            },
             opacity: {
               superOpaque: '0.95',
             },
@@ -191,6 +194,8 @@ test(
         --color-steel: rgb(70 130 180);
         --color-smoke: rgba(245, 245, 245, var(--smoke-alpha, 1));
 
+        --default-ring-color: #c0ffee;
+
         --opacity-*: initial;
         --opacity-superOpaque: 95%;
 

packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts

@@ -237,6 +237,14 @@ async function migrateTheme(
       prevSectionKey = sectionKey
     }
 
+    // ringColor.DEFAULT is a special case that maps to `--default-ring-color`
+    // as to match the behavior of v3
+    if (key[0] === 'ringColor' && key[1] === 'DEFAULT') {
+      let property = 'default-ring-color'
+      themeSection.push(`  ${escape(`--${property}`)}: ${value};`)
+      continue
+    }
+
     if (resetNamespaces.has(key[0]) && resetNamespaces.get(key[0]) === false) {
       resetNamespaces.set(key[0], true)
       let property = keyPathToCssProperty([key[0]])

packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

@@ -57,6 +57,10 @@ test('config values can be merged into the theme', () => {
             '2xl': ['2rem'],
           },
 
+          ringColor: {
+            DEFAULT: '#fff',
+          },
+
           letterSpacing: {
             superWide: '0.25em',
           },
@@ -125,6 +129,8 @@ test('config values can be merged into the theme', () => {
   expect(theme.resolve('100%', ['--width'])).toEqual('100%')
   expect(theme.resolve('9xs', ['--container'])).toEqual('6rem')
   expect(theme.resolve('fast', ['--ease'])).toEqual('cubic-bezier(0, 0.55, 0.45, 1)')
+  expect(theme.get(['--ring-color'])).toEqual(null)
+  expect(theme.get(['--default-ring-color'])).toEqual('#fff')
 })
 
 test('will reset default theme values with overwriting theme values', () => {

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -50,6 +50,18 @@ export function applyConfigToTheme(
       }
     }
 
+    // ringColor.DEFAULT is a special case that maps to `--default-ring-color`
+    // as to match the behavior of v3
+    if (path[0] === 'ringColor' && path[1] === 'DEFAULT') {
+      designSystem.theme.add(
+        '--default-ring-color',
+        '' + value,
+        ThemeOptions.INLINE | ThemeOptions.REFERENCE | ThemeOptions.DEFAULT,
+      )
+
+      continue
+    }
+
     let name = keyPathToCssProperty(path)
     if (!name) continue