Add OKLCH color support to Figma plugin

[Copilot]

This PR adds support for OKLCH color format in color tokens, shadows, borders, and composition tokens.

Changes

• Added OKLCH parsing: Extended convertToFigmaColor function in src/plugin/figmaTransforms/colors.ts to detect and parse OKLCH color format using the existing colorjs.io dependency
• Proper color space conversion: OKLCH colors are converted to sRGB and clamped to [0,1] range as expected by Figma's API
• Robust error handling: Added fallback mechanisms for invalid OKLCH values
• Comprehensive test coverage: Added tests for valid OKLCH colors, colors with alpha channels, edge cases, and error handling

Implementation Details

The implementation follows the existing pattern used for RGB and HSL colors:

} else if (input.startsWith('oklch')) {
  try {
    const oklchColor = new Color(input);
    const rgbColor = oklchColor.to('srgb');
    const [r, g, b] = rgbColor.coords;
    const a = rgbColor.alpha ?? 1;
    
    color = {
      r: Math.max(0, Math.min(1, r)), // Clamp to [0,1] range
      g: Math.max(0, Math.min(1, g)),
      b: Math.max(0, Math.min(1, b)),
    };
    opacity = roundToTwo(a);
  } catch (e) {
    // Fallback handling...
  }
}

Supported OKLCH Formats

• oklch(0.5 0.1 180) - Basic OKLCH
• oklch(0.5 0.1 180 / 0.5) - OKLCH with alpha
• Works in shadows: { "color": "oklch(0.5 0.1 180)", "type": "dropShadow", ... }
• Works in borders: { "color": "oklch(0.5 0.1 180)", "width": "1px", ... }

Automatic Support Across Token Types

Since all color processing goes through the same convertToFigmaColor function, OKLCH support automatically works in:

• Color tokens
• Box shadow tokens
• Border tokens
• Composition tokens
• Gradients
• Figma variables and styles

Testing

• All existing tests pass (no regressions)
• Added comprehensive test coverage for OKLCH functionality
• Verified build succeeds without errors
• Tested error handling for invalid OKLCH values

Fixes #3403.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 6071f4657c3604a0796772c7f8018d37886eac1c

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	Minor

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

[github-actions[bot]]

⤵️ 📦 ✨ The artifact was successfully created! Want to test it? Download it here 👀 🎁

[github-actions[bot]]

Commit SHA:bc279a9e3e97d6c09d93fd0d5e1bab8c14ff272e No changes to code coverage between the base branch and the head branch

[github-actions[bot]]

Commit SHA:e8ec93dea1112c722860f359cc345fd2aa3517e1 Current PR reduces the test coverage percentage by 1 for some tests

[Copilot]

That works great!

However, we also need to support this inside linear-gradient color strings. Context: color tokens can start with linear-gradient( and then have colors defined there, which already a...

Added OKLCH support in linear gradients and created a changeset. The gradient parser now properly handles OKLCH colors that contain spaces by respecting parentheses boundaries during parsing. All tests pass including new comprehensive tests for OKLCH in gradients. Commit f716299

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• http://168.63.129.16:80/machine/
  • Triggering command: /usr/bin/python3 -u bin/WALinuxAgent-2.13.1.1-py3.9.egg -collect-logs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

[six7]

linting fails

[Copilot]

linting fails

Fixed all linting issues. The problems were trailing spaces and use of ++/-- operators which are discouraged by the ESLint config. Also removed unused variable declarations. All tests pass and lint now succeeds. Commit dfba1ab

[six7]

bugbot run

[six7]

@copilot fix what Cursor said

[Copilot]

@copilot fix what Cursor said

I don't see any information about what "Cursor said" in the context provided. Could you clarify what specific issue needs to be fixed? The current code passes linting, the OKLCH tests are passing, and the build succeeds.