Color Tooling Migration

[blunteshwar]

Dear Spectrum Web Components Community,

We hope this message finds you well! As maintainers of the Spectrum Web Components repository, we are committed to ensuring the highest quality of code and experience for our users. To that end, we wanted to inform you of an upcoming change regarding our color tooling library.

Currently, we have been utilizing the 'ctrl/tinycolor' library for managing colors within our components. While this library has served us well in the past, we have encountered some persistent bugs and issues that have hindered our ability to provide the best possible experience for our users.

After careful consideration and extensive testing, we have decided to migrate to a new color tooling library. This decision was made with the goal of improving the stability, reliability, and overall performance of our components.

To facilitate this transition, we have prepared a comprehensive document outlining our process for selecting the new library. This document covers everything from the issues we encountered with the current library to the criteria we used to evaluate alternative options.

Background

Users of Spectrum Web Components (SWC) are currently facing numerous issues with the color components, primarily due to bugs in the @ctrl/tinycolor library. As a result, migrating to a new color library is deemed necessary.

Key Questions Before Migration

CMYK Support:
Do consumers require CMYK support, and if so, how many need precise conversions?

Open-Source Requirements:
Can the new color library be non-open-source, and how would we leverage such a library (e.g., through API calls)?

CMYK Conversion Accuracy:
Is naive CMYK conversion acceptable, or is precise conversion necessary?

Migration Options

Migrate to an Open-Source Library:
Pros:
Free and modifiable.
Community support for bug fixes and improvements.
Good documentation and flexibility.
Cons:
May lack precise CMYK support.
Uncertain maintenance depending on community contributions.

Migrate to an Open-Source Library with Custom CMYK Support:
Pros:
Ability to implement precise CMYK conversion.
Full control over implementation.
Cons:
Complex and time-consuming development.
Requires significant resources and testing.

Develop a Custom Color Library:
Pros:
Tailored to specific requirements.
Full ownership and control.
Cons:
High development effort and expertise needed.
Full responsibility for maintenance and testing.

Comparison of Open-Source Libraries

Color.js:
Pros: Well-documented, supports many color spaces.
Cons: No built-in CMYK support, larger size (1.93 MB).

Chroma.js:
Pros: Built-in color validation, CMYK support, smaller size (309 KB), good documentation.
Cons: Might be overkill for simple tasks, last updated 2 years ago.

Observations and Conclusion

Open-Source Libraries (Options 1 and 2):

Straightforward and resource-efficient.
May lack precise CMYK conversions.

Custom Implementation (Option 3):

Provides full control and precision.
Requires substantial resources and expertise (not currently viable).

Recommendation

Migrate to an open-source, bug-free library such as color.js or chroma.js. These libraries offer robust functionality, community support, and extensive documentation, making them suitable for SWC's needs.

Note on CMYK Support

While color.js and chroma.js support the CMYK color space, their conversions are less precise. Users should be aware of this limitation, especially when precise color conversion is crucial. This limitation should be clearly communicated on the Storybook page for SWC color components, balancing ease of integration with transparency about current capabilities.

We understand that any change to established tooling can be disruptive, and we are committed to making this transition as smooth as possible for our users. Once the new library has been selected, we will provide detailed instructions for integrating it into your projects.

Thank you for your continued support and understanding as we work to improve Spectrum Web Components for everyone.

Best regards,