fix(code-snippet): use transparent color instead of transparent keyword for linear gradients

[jendowns]

Closes #4769

Safari interprets transparent (which maps to rgba(0, 0, 0, 0)) differently & therefore the linear gradients used in the CodeSnippet component are darker, like a transparent black.

Here a couple links explaining this:

• https://stackoverflow.com/a/56548711
• https://css-tricks.com/thing-know-gradients-transparent-black/

Changelog

Changed

• use the Sass rgba() color function to make primary gradient color transparent, rather than using transparent keyword

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit 283cfe0

https://deploy-preview-4770--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 283cfe0

https://deploy-preview-4770--carbon-components-react.netlify.com

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 283cfe0

https://deploy-preview-4770--carbon-elements.netlify.com

[jendowns]

Hey FYI if you notice a strange style regression with the CopyButton inside the CodeSnippet, that appears to be caused by a class name getting left out in an earlier change.

I reported the issue here: #4772 & I'm working on a fix for that separately 👍

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit 98e7979

https://deploy-preview-4770--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 98e7979

https://deploy-preview-4770--carbon-elements.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 98e7979

https://deploy-preview-4770--carbon-components-react.netlify.com

[abbeyhrt]

Hi @jendowns! For me, the linear-gradient isn't there anymore. Here's what I'm seeing now:

[jendowns]

Thanks @abbeyhrt!

I can see the gradients locally, but not in these deployments (like you just reported).

Looks like the reason is related to this issue I opened a couple weeks ago: #4345

Using the rgba() Sass function with color tokens is fine locally but then the deployments throw in CSS variables & things are compiled incorrectly, with the variables? 😭

// Original Sass
background-image: linear-gradient(to right, rgba($ui-01, 0), $ui-01);

// Compiled *local* CSS, which looks great 🎉
background-image: linear-gradient(to right, rgba(244, 244, 244, 0), #f4f4f4);

// Compiled deployed CSS with variables, which is broken 😭 
background-image: linear-gradient(to right, rgba(var(--cds-ui-01, #f4f4f4), 0), var(--cds-ui-01, #f4f4f4));

@emyarod What do you think should be done here? Is this related to any work you are currently doing for #4345?

I was thinking a possible solution here would be to use the theme mixins & just target each theme... and then manually set these values to rgb, instead of using color tokens. To avoid the variables messing up the gradients in these deployments. 🤔

[emyarod]

looks good to me, the gradients are no longer present locally and in the deploy preview

[emyarod]

regarding #4345, it's on hold at the moment since we haven't come up with a good way to proceed yet and it should only be affecting experimental code (including the deploy preview) IIRC

[jendowns]

Thanks @emyarod! When you say "the gradients are no longer present locally" -- do you mean when you pulled down my branch & ran the storybook environment, you did not see them? (My observation is that they aren't visible on the deploy preview due to variable usage but are visible if running locally)

[emyarod]

do you mean when you pulled down my branch & ran the storybook environment, you did not see them?

yes that's what I meant, I don't have the gradient locally with and without custom properties enabled

[jendowns]

@asudoh should I close this out given your PR #4781?

[asudoh]

Yeah makes sense - Considered regular linear-gradient approach but I saw a problem with CSS custom properties. Thank you for trying to address this problem @jendowns!

[jendowns]

Thanks @asudoh! In the future please let me know if you'd like me to adjust my existing PR -- always happy to take feedback. 😄

Closing this one out

[asudoh]

@jendowns My apologies if it looked like I took over your work - I always recognize you are making great contributions to Carbon. This specific case I got a similar issue on Modal which needed a quick solution. I'll be extra careful if any of my work may conflict with your work and make sure it's communicated. Thank you for your contributions as always!

[jendowns]

No worries at all @asudoh! And thank you so much for your kind words. ❤️