Skip to content

feat(reactive-controllers): Migrate to Colorjs from Tinycolor #4713

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 92 commits into from
Feb 24, 2025

Conversation

blunteshwar
Copy link
Contributor

@blunteshwar blunteshwar commented Sep 2, 2024

This PR marks the initial steps in our color library migration for Spectrum Web Components. As part of this effort, I have implemented an abstraction layer that includes the following key elements:

Color Types: Defined standardized types to ensure consistent handling of color data across components.
Transformation Functions: Created functions to handle color conversions and transformations, making it easier to work with various color formats.
This abstraction layer is designed to facilitate a smoother migration process and minimize the impact on our consumers. By isolating the color logic, we can easily adapt to future changes in the underlying color library.

Stay tuned for more details—there's much more to come! 🚀

Related issue(s)

#3950 ✅ (Solved)
#3883 ✅ (Solved)
#3655 ✅ (Solved)
#3071 ✅ (Solved)
#3058 ✅ (Solved)

Motivation and context

  • Did it pass in Desktop?
  • Did it pass in Mobile?
  • Did it pass in iPad?

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

@blunteshwar blunteshwar marked this pull request as ready for review September 4, 2024 13:53
@blunteshwar blunteshwar requested a review from a team as a code owner September 4, 2024 13:53
Copy link

github-actions bot commented Sep 4, 2024

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

@coveralls
Copy link
Collaborator

coveralls commented Sep 4, 2024

Pull Request Test Coverage Report for Build 13498253698

Details

  • 818 of 824 (99.27%) changed or added relevant lines in 10 files are covered.
  • 1 unchanged line in 1 file lost coverage.
  • Overall coverage decreased (-0.001%) to 98.178%

Changes Missing Coverage Covered Lines Changed/Added Lines %
packages/color-area/src/ColorArea.ts 74 75 98.67%
tools/reactive-controllers/src/ColorController.ts 693 698 99.28%
Files with Coverage Reduction New Missed Lines %
packages/color-area/src/ColorArea.ts 1 95.65%
Totals Coverage Status
Change from base Build 13496959333: -0.001%
Covered Lines: 33328
Relevant Lines: 33765

💛 - Coveralls

Copy link

github-actions bot commented Sep 4, 2024

Tachometer results

Currently, no packages are changed by this PR...

Copy link

github-actions bot commented Sep 17, 2024

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.99 0.98 0.98
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category Latest Main Branch
Total 243.718 kB 231.29 kB 🏆 231.589 kB
Scripts 60.028 kB 54.245 kB 🏆 54.464 kB
Stylesheet 47.476 kB 42.63 kB 🏆 42.647 kB
Document 6.237 kB 5.466 kB 🏆 5.493 kB
Font 126.988 kB 126.597 kB 🏆 126.633 kB

Request Count

Category Latest Main Branch
Total 52 52 52
Scripts 41 41 41
Stylesheet 5 5 5
Document 1 1 1
Font 2 2 2

@blunteshwar blunteshwar changed the title feat(reactive-controllers): added color orchestration layer feat(reactive-controllers): Migrate to Colorjs from Tinycolor Sep 30, 2024
@rubencarvalho rubencarvalho changed the title [HOLD] feat(reactive-controllers): Migrate to Colorjs from Tinycolor feat(reactive-controllers): Migrate to Colorjs from Tinycolor Feb 20, 2025
@blunteshwar blunteshwar merged commit 9d740f0 into main Feb 24, 2025
26 of 27 checks passed
@blunteshwar blunteshwar deleted the color-migration branch February 24, 2025 13:23
nikkimk pushed a commit that referenced this pull request Feb 27, 2025
* feat(reactive-controllers): added color orchestration layer

* chore: updated yarn lock

* chore(reactive-controllers): minor fix

* chore: updated yarn lock

* chore(reactive-controllers): added tests and color formats

* chore(reactive-controllers): updated rgb limits

* chore(color-field): updated color field

* chore(color-field): updated tests

* chore(reactive-controllers): added some tests

* chore(reactive-controllers): added some more tests

* chore(color-area, color-slider): migrated to colorjs

* chore(color-slider): updated tests

* chore(color-area): resolved tests

* chore(color-wheel): migrated color wheel to colorjs

* chore(color-area): updated stories

* chore(reactive-controllers): removed tinycolor completely

* chore: fully removed tinycolor

* chore: updated golden image hash

* chore(color-area): minor fix

* chore(reactive-controllers): added a check for invalid color formats

* chore(reactive-controllers): minor fix

* chore: added docs block for color controller

* chore(color-area): added docs

* chore(reactive-controllers): added a readme file

* chore(reactive-controllers): minor fix in docs

* chore: updated image hash

* chore: updated image hash

* chore: updated versions

* chore: updated yarn lock

* chore: minor-fix

* chore: minor fixes

* chore: updated image hash

* chore(color-area): updated with change in slider value

* chore(color-area): added a test

* chore: updated yarn lock

* chore: updated golden image hash

* chore: updated golden image hash

* chore: updated yarnlock

* chore: updated yarn lock

* chore(color-wheel): updated tests

* chore: updated image hash

* chore: updated yarn lock

* chore: updated image hash

* chore: reverted image hash

* chore: updated image hash

* chore: updated image hash

* chore: updated stories

* chore: updated image hash

* chore: skipping cache restoration

---------

Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: Rúben Carvalho <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
castastrophe pushed a commit that referenced this pull request Mar 13, 2025
* feat(reactive-controllers): added color orchestration layer

* chore: updated yarn lock

* chore(reactive-controllers): minor fix

* chore: updated yarn lock

* chore(reactive-controllers): added tests and color formats

* chore(reactive-controllers): updated rgb limits

* chore(color-field): updated color field

* chore(color-field): updated tests

* chore(reactive-controllers): added some tests

* chore(reactive-controllers): added some more tests

* chore(color-area, color-slider): migrated to colorjs

* chore(color-slider): updated tests

* chore(color-area): resolved tests

* chore(color-wheel): migrated color wheel to colorjs

* chore(color-area): updated stories

* chore(reactive-controllers): removed tinycolor completely

* chore: fully removed tinycolor

* chore: updated golden image hash

* chore(color-area): minor fix

* chore(reactive-controllers): added a check for invalid color formats

* chore(reactive-controllers): minor fix

* chore: added docs block for color controller

* chore(color-area): added docs

* chore(reactive-controllers): added a readme file

* chore(reactive-controllers): minor fix in docs

* chore: updated image hash

* chore: updated image hash

* chore: updated versions

* chore: updated yarn lock

* chore: minor-fix

* chore: minor fixes

* chore: updated image hash

* chore(color-area): updated with change in slider value

* chore(color-area): added a test

* chore: updated yarn lock

* chore: updated golden image hash

* chore: updated golden image hash

* chore: updated yarnlock

* chore: updated yarn lock

* chore(color-wheel): updated tests

* chore: updated image hash

* chore: updated yarn lock

* chore: updated image hash

* chore: reverted image hash

* chore: updated image hash

* chore: updated image hash

* chore: updated stories

* chore: updated image hash

* chore: skipping cache restoration

---------

Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: Rúben Carvalho <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
6 participants