Organize color tokens

[c4rlosviteri]

Color Token Organization Improvement

This PR reorganizes color tokens to ensure proper hierarchical display in Figma while maintaining the same token values. The changes focus on two main aspects:

Improved Token Hierarchy

• Reorganized flat token structures into logical nested hierarchies
• Tokens now follow the pattern category/component/state instead of category/component-state
• This change ensures better organization and discoverability in Figma

Clean JSON Structure

• Removed non-standard properties (docType and docCategory)
• These properties were not part of the Design Tokens specification
• Removal ensures clean JSON output for Figma integration

Changes at a glance:

❌ Old: background/accordion-hover
✅ New: background/accordion/hover

Impact

• No functional changes to token values
• Better organization in Figma's token panel
• Cleaner JSON structure
• Improved maintainability and scalability

Color tokens should be organized to display correctly on Figma. In this PR, I kept the same tokens but improved their organization through proper nesting.

Examples

❌ Old structure - Flat organization

{
  "color": {
    "background": {
      "accordion-hover": { "value": "#F5F5F5" },
      "accordion-active": { "value": "#E0E0E0" },
      "modal-overlay": { "value": "rgba(0, 0, 0, 0.5)" },
      "modal-content": { "value": "#FFFFFF" }
    }
  }
}

✅ New structure - Nested organization

{
  "color": {
    "background": {
      "accordion": {
        "hover": { "value": "#F5F5F5" },
        "active": { "value": "#E0E0E0" }
      },
      "modal": {
        "overlay": { "value": "rgba(0, 0, 0, 0.5)" },
        "content": { "value": "#FFFFFF" }
      }
    }
  }
}

[mhewson]

Thanks for the detailed overview of the change - looks good