Color groups?

[michaelGregoire]

Until I ran the linter against my DESIGN.md file, I expected color groups to be ok. As it is now, in order to allow for color groups I have to have them listed under colors, like so:

colors:
  utility-info-50: "#EEF7FC"
  utility-info-100: "#D4EBF7"
  utility-info-200: "#A9D8EF"
  utility-info-300: "#6EBCE2"
  utility-info-400: "#33A0D7"
  utility-info-500: "#2483B3"
  utility-info-600: "#1D6A91"
  utility-info-700: "#16516F"
  utility-info-800: "#0F384D"
  utility-info-900: "#081F2B"
  utility-success-50: "#F0F9F2"
  utility-success-100: "#DEF3E2"
  utility-success-200: "#BCE6C6"
  utility-success-300: "#80D093"
  utility-success-400: "#45BA60"
  utility-success-500: "#2F7E41"
  utility-success-600: "#246132"
  utility-success-700: "#1A4725"
  utility-success-800: "#123019"
  utility-success-900: "#0B1E0F"

This is definitely not optimal.

[Arshgill01]

Thanks for raising this — agreed that requiring all grouped palettes to be manually flattened is not ideal.

I opened a PR for this.

The PR adds support for nested color groups like:

colors:
  utility-info:
    50: "#EEF7FC"
    100: "#D4EBF7"

while preserving the existing flattened output format, e.g. utility-info-50, so current Tailwind/DTCG export behavior stays compatible.

It also supports references through both {colors.utility-info-50} and {colors.utility-info.50}.