[PLAY-1796] Dark Audit Multiple Users (#4139)

**What does this PR do?** A clear and concise description with your
runway ticket url.
This PR adds dark mode to the number badge that goes along with Multiple
Users kit. We change the color of the badges halo from light to dark for
both react & rails.

**Screenshots:** Screenshots to visualize your addition/change
![Screenshot 2025-01-20 at 3 27
14 PM](https://github.com/user-attachments/assets/5e464ef7-fe65-4156-a48d-af3fa4380be5)


**How to test?** Steps to confirm the desired behavior:
1. Go to the [deployed
env](https://pr4139.playbook.beta.gm.powerapp.cloud/)
2. Search for 'Multiple Users
3. For both Rails/React switch to dark mode
4. See the badge '+2' change from a light border to dark.


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

---------

Co-authored-by: Gary Kang <[email protected]>

Author: yuriyivanenko

playbook/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -24,6 +24,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     color: $primary;
     font-weight: $bold;
     font-size: $font_smallest - 1;
+
+    &.dark {
+      border: $pb_multiple_users_border_size solid $bg_dark;
+    }
   }
 
   .multiple_users_badge_xxs {

playbook/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

@@ -50,6 +50,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
 
   const itemClasses = classnames(
     'pb_multiple_users_item',
+    dark && 'dark',
     buildCss('multiple_users_badge', avatarSizeClass)
   )
 

playbook/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -4,7 +4,7 @@
     <% end %>
 
     <% if object.more_than_four %>
-      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %>">
+      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
         <%= "+#{object.users.count - object.display_count}" %>
       </div>
     <% end %>