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 picker] Refactor checker board background #3812

Merged
merged 3 commits into from Jan 12, 2021

Conversation

aveline
Copy link
Contributor

@aveline aveline commented Jan 11, 2021

WHY are these changes introduced?

Fixes #3789

WHAT is this pull request doing?

Rather than compose the checker board with var(--p-surface) and transparent which causes it to not be visible on a var(--p-surface) background, compose it with var(--p-surface) and var(--p-surface-neutral-subdued) so it is still visible no matter the background colour.

Simplifies how the checker board is generated by using conic-gradient rather than linear-gradient.

Screen Shot 2021-01-11 at 2 08 19 PMScreen Shot 2021-01-11 at 2 08 38 PMScreen Shot 2021-01-11 at 2 16 59 PM Screen Shot 2021-01-11 at 2 13 51 PMScreen Shot 2021-01-11 at 2 14 06 PMScreen Shot 2021-01-11 at 2 16 18 PM
Before After

🎩 checklist

  • Tested on mobile
  • Tested on multiple browsers
  • Tested for accessibility
  • Updated the component's README.md with documentation changes
  • Tophatted documentation changes in the style guide
  • For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

@github-actions
Copy link
Contributor

github-actions bot commented Jan 11, 2021

🟢 This pull request modifies 2 files and might impact 1 other files.

Details:
All files potentially affected (total: 1)
📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/ColorPicker/ColorPicker.scss (total: 1)

Files potentially affected (total: 1)

Copy link
Member

@alex-page alex-page left a comment

Choose a reason for hiding this comment

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

Amazing @aveline, this is more readable/understandable and works ✨

Copy link
Contributor

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

Awesome 🥇

Comment on lines +14 to +18
background: repeating-conic-gradient(
var(--p-surface) 0% 25%,
var(--p-surface-neutral-subdued) 0% 50%
)
50% / #{spacing() spacing()};
Copy link
Contributor

Choose a reason for hiding this comment

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

TIL! This looks like a great cleanup 👏

@aveline aveline merged commit 786401c into version-6.0.0 Jan 12, 2021
@aveline aveline deleted the colorpicker-checkerboard-bg branch January 12, 2021 18:35
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.

None yet

3 participants