Allow transparent backgrounds for banners #1796
Conversation
So we can use transparent images.
|
|
There was a problem hiding this comment.
Looks good and works as expected!
- We should now remove the help text under the colour scheme picker since the selector will always work regardless of the container. Screenshot
There was a problem hiding this comment.
I think we might need to change the default values of that section with a colour scheme using a white text, screenshot. But that would need to be done in the private dawn repo I believe as it would be an update on the .json file.
| .banner--desktop-transparent .button--secondary { | ||
| --color-button: 255, 255, 255; | ||
| --color-button-text: 255, 255, 255; | ||
| --alpha-button-background: 0; |
There was a problem hiding this comment.
I don't think we should be removing the alpha value here. If the button is using the outline style it should keep a transparent background 🤔
There was a problem hiding this comment.
On mobile it looks good but not on desktop: recording.
| --color-foreground: 255, 255, 255; | ||
| --color-button: 255, 255, 255; | ||
| --color-button-text: 0, 0, 0; |
There was a problem hiding this comment.
Those changes are on declarations within a media query @media screen and (min-width: 750px) { so they're only impacting the wider screens.
If you're on mobile the colour scheme is never applied and the default is white.
So it can make for a confusing experience. As it's working on desktop and applying the colour scheme accordingly when a container is and isn't showing but not on mobile.
Also the info next to the colour scheme setting needs to be updated:
|
Hey team, The probot-CLA was recently deprecated and replaced with the shopify-cla action. To successfully use the new shopify-cla status check, this PR will be closed and reopened. Thanks and sorry for the minor inconvenience. Message me if you have any questions 😄 Please refer to the following for more information: |
PR Summary:
Removing the 0.1 opacity default background, and "magic" colours when overlays are applied so they stay true to the colour palletes.
Why are these changes introduced?
More creativity with banners
Testing steps/scenarios