[New DL] Color picker alpha checkers are invisible

[dostu]

Issue summary

When new design language is enabled color picker checkers background is not visible when it is is on white background (i.e. in Card).

I believe the issue was introduced here: #2768

background-image: linear-gradient(45deg, var(--p-surface, #dfe3e8) 25%, transparent 25%), linear-gradient(-45deg, var(--p-surface, #dfe3e8) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--p-surface, #dfe3e8) 75%), linear-gradient(-45deg, transparent 75%, var(--p-surface, #dfe3e8) 75%);

--p-surface value is white, so checkers are invisible on white background.

Expected behavior

Checkers should be visible.

Actual behavior

They are not.

Steps to reproduce the problem

1. Enable new design language (<AppProvider features={{ newDesignLanguage: true }}>)
2. Add color picker with alpha value (<ColorPicker allowAlpha />) on white background.

Reduced test case

https://codesandbox.io/s/shopify-polaris-react-colorpicker-checkers-example-8bxor

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 5.12.0
• Browser: Chrome (Version 87)
• Device: MacBook Pro
• Operating System: macOS 10.15.6

[ghost]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's design system and dev experience.