Skip to content
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

[Color system] Convert colors to HSLuv #2361

Merged
merged 5 commits into from
Nov 6, 2019
Merged

[Color system] Convert colors to HSLuv #2361

merged 5 commits into from
Nov 6, 2019

Conversation

tmlayton
Copy link
Contributor

@tmlayton tmlayton commented Oct 25, 2019

WHY are these changes introduced?

Use a color space (HSLuv) which maintains human perceived lightness across hues. This is important to maintain color contrast regardless of hue. Also, tweaked colors, added shadow colors, and fixed an issue where types were not generated for the color JSON config.

WHAT is this pull request doing?

  • Importing the HSLuv library, converting colors accordingly
  • Tweaking the values in the color adjustments config
  • Converting the JSON file to a TS file

🎩 checklist

  • 🎩

@github-actions
Copy link
Contributor

github-actions bot commented Oct 25, 2019

💦 Potential splash zone of changes introduced to src/**/*.tsx in this pull request:

❌ Something fishy happened. We’re on it!

cc @amrocha @kaelig

Error message: TypeError: Cannot read property 'forEach' of undefined

This comment automatically updates as changes are made to this pull request.
Feedback, troubleshooting: open an issue or reach out on Slack in #polaris-tooling.

@tmlayton tmlayton requested a review from danrosenthal October 25, 2019 06:17
Copy link
Contributor

@danrosenthal danrosenthal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is very exciting. The Banner colors look fantastic, but the Badge colors look a bit odd. Will take some tweaking to get right, but this feels like a really positive step. The generated colors already feel truer to the intent. Nice work!

@tmlayton
Copy link
Contributor Author

tmlayton commented Nov 1, 2019

I added a kitchen sink example. It’s still a WIP to cherry pick which of the stories we want to show. As of now it is filtering out any stories which match the exclude regex.

@tmlayton tmlayton force-pushed the color-system/hsluv branch 2 times, most recently from 2dd7c08 to 0142b1d Compare November 5, 2019 21:08
@tmlayton tmlayton requested a review from BPScott November 5, 2019 21:14
@tmlayton tmlayton marked this pull request as ready for review November 5, 2019 21:14
Copy link
Contributor

@danrosenthal danrosenthal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I HSLuv this PR ❤️

@tmlayton
Copy link
Contributor Author

tmlayton commented Nov 5, 2019

image

Co-authored-by: Dan Rosenthal <dan.rosenthal@shopify.com>
@tmlayton tmlayton merged commit c28f314 into master Nov 6, 2019
@tmlayton tmlayton deleted the color-system/hsluv branch November 6, 2019 00:10
@PabloVallejo PabloVallejo temporarily deployed to production November 12, 2019 14:48 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants