Apply more shadow to <wa-avatar>

[HovKlan-DH]

I am still struggling understanding some basic part of this, but slowly getting there. One thing I would like to do now, is to add more shadow to the <wa-avatar> as its default seems a little to small. I would like a broader and darker shadow in some situations.

I have applied this:

wa-avatar {
    box-shadow: var(--wa-shadow-l);
    --wa-shadow-spread-l: 2.0rem;
}

.. which gives this:

I of course have misunderstood how to use this, so some hints would be appreciated :-)

[LeaVerou]

Looks like there is a bug here, thanks you for reporting this!

As a workaround until we fix it, add this to your wa-avatar rule:

--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
    var(--wa-shadow-spread-l) var(--wa-color-shadow);

[HovKlan-DH]

Ahhh.. well, then I can understand my struggles, ha.

I am not sure what is expected from your suggestion here, but this is what I now have in my CSS:

wa-avatar {
    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
    var(--wa-shadow-spread-l) var(--wa-color-shadow);
}

And this is the output, even with the newest alpha release 10 (no shadows at all):

However, I am in no hurry for this, so I can await a bugfix in an upcoming new alpha, and I am happy this is now on your todo-list.

[LeaVerou]

@HovKlan-DH Apologies, I should have clarified, I meant adding this in addition to what you’ve had already. You still need to use the shadow in box-shadow to get one.

[HovKlan-DH]

Got it.

I now have this code:

wa-avatar {
    box-shadow: var(--wa-shadow-l);
    --wa-shadow-spread-l: 0.2rem;
    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-m)
    var(--wa-shadow-spread-l) var(--wa-color-shadow);
}

.. which gives this nice shadow:

Thanks a lot for your eminent and blazing fast support. This is quite special and very nice 🙏