Fix resolving colors via theme(…) in compat mode with nested objects

[RobinMalfait]

This PR fixes an issue when loading (nested) colors from a config file and later referencing it via the theme(…) function in CSS.

Given a config like this:

module.exports = {
  theme: {
    colors: {
      foo: 'var(--foo-foo)',
      'foo-bar': 'var(--foo-foo-bar)',
    },
  },
}

We internally map this into the design system. The issue here is that the foo and foo-bar are overlapping and it behaves more like this:

{
  foo: {
    DEFAULT: 'var(--foo-foo)',
    bar: 'var(--foo-foo-bar)'
  },
}

So while we can easily resolve colors.foo-bar, the colors.foo would result in the object with a DEFAULT key. This PR solves that by using the DEFAULT key if we end up with an object that has it.

If you end up resolving an object (theme(colors)) then the behavior is unchanged.

Test plan

1. Added a test based on the config in the issue (which failed before this fix).
2. Also simplified the test case after identifying the problem (with the DEFAULT key).

Fixes: #19091