Fix shadows and scrims in dark mode

What does this MR do and why?

Fix shadows and scrims in dark mode. Like !124939 (merged) but less disruptive (doesn't break sidebar borders). The ones from 02-08 that I didn't update are meant for active/hover states, whereas 16 and 24 are only used for box-shadow.

fixes part of #416481 (closed) (not the scrollbars part)

current definition is:

$t-gray-a-16: rgba($gray-950, 0.16) !default;

In dark mode $gray-950 is a light color instead of dark color. The color comes out as a transparent white, and shadows look odd (as if glowing).

How could we fix it instead?

Change has some risk - mostly of someone unwittingly using the variable for something that isn't a box-shadow. Worth updating pajamas docs to include this, or could try one of these alternate solutions:

a) Change the original definition to not use $gray-950, and instead use #1f1e24 directly. Then there is no need to override
b) add new variables specific for shadow colors, then override those in dark mode. This would reduce risk of accidental unwanted side effects (if someone uses $t-gray-a-16 for not a shadow)

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Enable dark mode
2. Open search modal or some others
3. Or a listbox with a header
4. Check I didn't break the sidebar this time

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.