fix: add shadow token, update overlay token

[janhassel]

Closes #9802

Changelog

New

• Added new token shadow
  • white/g10/v9: rgba(0, 0, 0, 0.3)
  • g80/g90/g100: rgba(0, 0, 0, 0.8)

Changed

• Updated overlay/overlay-01 token
  • white/g10/v9: unchanged (see below)
  • g80/g90/g100: rgba(0, 0, 0, 0.65)
• Updated token snapshots

Testing / Reviewing

• Verify visual appearance is as expected
• According to @yumeforever, the current overlay/overlay-01 token in light themes should've been rgba(gray100, 0.7) though it being rgba(gray100, 0.5). Which one is preferred?
• According to @yumeforever, the current shadow of overflow menus in light themes should've been rgba(0, 0, 0, 0.3) though it was rgba(0, 0, 0, 0.2). I changed it to @yumeforever's suggestion to increase the contrast. Let me know if this works for everyone.

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 5895656

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/615f5a2e4351600007448933

😎 Browse the preview: https://deploy-preview-9812--carbon-react-next.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 5895656

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/615f5a2ea1dc350008dcc36f

😎 Browse the preview: https://deploy-preview-9812--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 5895656

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/615f5a2eef00bb00087c4e57

😎 Browse the preview: https://deploy-preview-9812--carbon-components-react.netlify.app

[yumeforever]

Testing / Reviewing

• Verify visual appearance is as expected
• According to @yumeforever, the current overlay/overlay-01 token in light themes should've been rgba(gray100, 0.7) though it being rgba(gray100, 0.5). Which one is preferred?

My bad, I thought it was 0.7, but I just checked the Color Guidelines and it is 0.5—Let's keep this way

• According to @yumeforever, the current shadow of overflow menus in light themes should've been rgba(0, 0, 0, 0.3) though it was rgba(0, 0, 0, 0.2). I changed it to @yumeforever's suggestion to increase the contrast. Let me know if this works for everyone.

Here I was using as reference the Style infos on the Overflow menu that states it is 0.3—if it was not I assume it was a bug.
That being said the Dropdown shadow is 0.2—I don't see a reason to have one point stop difference, so I would opt for the one with the more contrast, 0.3

[janhassel]

@yumeforever

Here I was using as reference the Style infos on the Overflow menu that states it is 0.3—if it was not I assume it was a bug.
That being said the Dropdown shadow is 0.2—I don't see a reason to have one point stop difference, so I would opt for the one with the more contrast, 0.3

That's probably a mistake on the documentation then as both components use the same code under the hood to display their box shadow. I agree that 0.3 seems better. 👍

[aagonzales]

Yay for making these tokens! And yeah I think @yumeforever has got you the right values. Thank you for making this PR!!! And thanks Morgana for doing the design leg work on this one. We really appreciate y'alls contribution.

PS Design team talked about this off-line and gave the thumbs up from our perspective.

[sstrubberg]

Looks great @janhassel!

[jnm2377]

💯 thanks for adding this!!!!