Add shadow into utilities

[guledali]

It would nice to quickly add shadows to components, please add this feature into utilities

[ajomadlabs]

Can I take up this ?

[sabrown84]

Hi @guledali I noticed that there is a box-shadow property via mixins...I don't however see a text-shadow property. Is that what you mean?

[sabrown84]

Hi @mdo any thoughts on this one? Am I on the right track?

[mdo]

@sabrown84 That one mixin is for quickly toggling box-shadows globally—this way, you can opt out of the property and value (property: value;) entirely rather than just resetting the value.

What @guledali is after is box shadow utility classes. So, for example:

.box-shadow { ... }
.box-shadow-lg { ... }

I don't know for sure which shadows we'd want to turn into utilities though. We should look through where we have box-shadow already in our components and see if there's some common patterns we can turn into utilities.

There also is overlap with #23775, which is asking for box-shadow variables. I imagine when we add the utilities, we'd introduce these new variables across those new classes and the existing component variables perhaps.

[guledali]

@mdo and @sabrown84 when I originally wrote this post more than two months ago, I was trying to add box shadow to some components like the card or navbar component just to separate from the rest of the content.

I was particularly looking at this codepen https://codepen.io/sdthornton/pen/wBZdXq
and was thinking it would be nice to have this in the utility section, rapidly adding shadow into your work.