Nested Vars/Themes

[Billzabob]

Describe the feature request

We have an existing theme object that looks like this:

export const DarkTheme: Theme = {
  text: {
    basicStrong: Colors.white100,
    basic: Colors.white90,
    basicSoft: Colors.white80,
    subStrong: Colors.white70,
  },
  fill: {
    surface: Colors.gray85,
    surfaceAlt: Colors.gray95,
    },
  },
  action: {
    primary: {
      strong: Colors.system.primary30,
      default: Colors.system.primary40,
    },
    danger: {
      strong: Colors.system.danger20,
      default: Colors.system.danger50,
    },
  }

We'd like to create a StyleX theme out of it but it seems to only support flat structures.

We'd like to be able to do something like this:

export const darkTheme = stylex.defineVars(DarkTheme)

Is there a way to do this that I'm missing?

And if there isn't, what's the expected way to handle this? Are we just going to have to flatten our theme structure?