[PLAY-1788] Avatar - Dark Mode Audit

[gabbymassaro]

What does this PR do? A clear and concise description with your runway ticket url.
PLAY-1788

This PR addresses the following issues in the Avatar Kit:

• The "Monogram" variant should use $text_dk_light as the background color
• The "Icon Circle Component Overlay" variant now follows dark mode standards
• The "Badge Component Overlay" variant now follows dark mode standards

Out of the scope of the story:

• There's a bug in light mode around the padding for the Rails "Icon Circle Component Overlay". It was addressed in dark mode as well.

Screenshots: Screenshots to visualize your addition/change
"Monogram" before and after REACT and RAILS:

"Icon Circle Component Overlay" and "Badge Component Overlay" Dark Mode Audit
before and after
REACT and RAILS:

Light Mode Bug "Icon Circle Component Overlay" RAILS ONLY:

How to test? Steps to confirm the desired behavior:

1. Go to /kits/avatar/rails and /kits/avatar/react
2. Enable dark mode
3. Scroll down to the Monogram, Icon Circle Component Overlay and Badge Component Overlay
4. See dark mode applied to the three components
5. For the bug: in light mode, go to the Rails - Icon Circle Component Overlay, see that the padding is no longer 24px

Checklist:

• LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See Changelog & Labels for details.
• DEPLOY I have added the milano label to show I'm ready for a review.
• TESTS I have added test coverage to my code.

[gabbymassaro]

@nidaqg Side question: do you think these changes require an alpha? I'm still unsure when we should be creating them.

[nidaqg]

@nidaqg Side question: do you think these changes require an alpha? I'm still unsure when we should be creating them.

Thats a great question @gabbymassaro ! So generally we decide on a case by case basis. Most of the dark mode stories are small enough changes to not require alpha testing. Things to looks for: If it is a beta kit, or a prop/feature not in use in Nitro, we should not need testing. Your code looks like its only affecting the overlayComponent piece which I believe is not in use in Nitro so should be ok to go without testing (you can check on that piece!)