[Tailwind design tokens] nested custom colors not being rendered

[rromanv]

trafficstars

Describe the bug

On my tailwind config, if I use nested colors names historie doesn't resolve them, but tailwind does.

On the reproduction link, I created 3 variants of the BaseButton; all colors work there, but on the tailwind rendered configuration, the nested "dontWork" colors are not showing correctly.

Also, when I tried to copy the missing color from the copy button, it saved as [object Object] instead of the actual content, similar to what discussion #182 described.

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{html,js,vue}'],
  theme: {
    colors: {
      prefix: {
        work: '#ED7623',
        dontWork: {
          DEFAULT: '#552D81',
          variant: '#873299',
        },
      },
    },
  },
}

Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-tw-nested-color-bug?file=tailwind.config.js

System Info

System:
    OS: Linux 5.10 Arch Linux
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
    Memory: 48.74 GB / 49.58 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.6.0 - ~/.nvm/versions/node/v18.6.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.6.0/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v18.6.0/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^3.0.0 => 3.0.1
    histoire: ^0.8.1 => 0.8.4
    vite: ^3.0.0 => 3.0.2

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[Akryum]

This is currently a limitation of the auto-generated tokens. We need to add support for additional nesting in colors.

[sun0day]

I can offer a PR@Akryum