Add support for multiple color tokens with array values

[Copilot]

This PR implements support for color tokens with multiple entries as arrays, similar to how boxShadow tokens work. Users can now create color tokens that contain multiple color values, which get applied as multiple fills in Figma.

What's Changed

Core Features

• Array Support: Color tokens now support string[] in addition to existing string values
• Simplified Type System: Uses plain string arrays instead of complex objects
• UI Components: New MultipleColorInput and SingleColorInput components with add/remove functionality
• Multiple Fills: Plugin applies multiple color values as separate fills on Figma nodes

User Experience

Users can now:

• Click the + button to add multiple colors to a single token
• Use - button to remove individual colors
• Drag and drop to reorder colors within a token
• Reference multiple color tokens: {colors.gradientPalette}
• Apply tokens to get multiple fills on Figma layers

Example Usage

{
  "colors": {
    "single": "#ff0000",
    "multiple": ["#ff0000", "#00ff00", "#0000ff"],
    "gradients": [
      "linear-gradient(45deg, #ff0000, #ffffff)",
      "#00ff00"
    ]
  }
}

Technical Implementation

Type System:

• Extended SingleColorToken to support string | string[]
• Maintained full backward compatibility with existing string-based tokens
• Simplified approach using plain string arrays

UI Components:

• MultipleColorInput: Main container with add/remove controls (based on BoxShadowInput)
• SingleColorInput: Individual color entry with drag-and-drop support
• ColorTokenForm: Intelligently detects single vs multiple color modes

Plugin Integration:

• Updated setColorValuesOnTarget to handle multiple paint arrays
• Enhanced applyColorTokenOnNode for multiple color token types
• Multiple colors applied as separate fills on Figma nodes

Validation & References:

• Added COLOR tokens to alias validation system
• Updated getAliasValue to handle string array types
• Multiple color tokens can be referenced as complete tokens but not inline

Testing

• Comprehensive unit tests covering single/multiple colors and reference resolution
• All existing functionality remains unchanged
• Development server tested successfully

Breaking Changes

None - this is fully backward compatible with existing color tokens.

Fixes the feature request for multiple color token support with array values.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 680409d7ac2d8236dcfa1bcafdc723a90ae504b6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[six7]

@copilot just keep to string or string[]

[Copilot]

@copilot just keep to string or string[]

Done! I've simplified the implementation to use string | string[] as requested. Removed the complex TokenColorValue objects and now multiple colors are just stored as an array of strings. The UI and plugin functionality remain the same, but the type system is much cleaner. Commit: 680409d