Add the CSS for shadows in the design docs

[julienw]

I miss the CSS to do the shadows in http://design.firefox.com/photon/patterns/shadows.html
From my tests, I think I need a 1px spread and it's not specified

box-shadow: 0 1px 2px 1px rgba(12, 12, 13, .10); seems to work fine for shadow-10 for example.

Bonus points if it can be available in a CSS var.

[brassy-]

@bwinton

[aminalhazwani]

hey @julienw thanks for the feedback! Can you clarify on the spread? Here's a demo where we don't we specify it https://codepen.io/aminalhazwani/full/GvEJLd/

and yes, we are working on variables 🙌

[julienw]

Have you increased the "blur" values from the doc recently ? I think it was 2px initially and that's why I added a 1px spread (I didn't want to change the specified blur value). But using 4px for blur seems to work nicely too, and I think it's even closer to what's intended.

Note in your demo, the text is incorrect for the leftmost example as the offset is 0 1px (the CSS is actually correct though).

[aminalhazwani]

OK, perfect! I fixed the demo. I don't remember if and when we increased the blur but yeah, here's the most recent spec http://design.firefox.com/photon/patterns/shadows.html#style. Thank you for your feedback. I consider this to be resolved, feel free to open new issue if you spot anything else! ☺️