[PLAY-1798] Enable Dark Mode in Loading Inline Text and Labels (#4130)

**What does this PR do?** A clear and concise description with your runway ticket url. Dark mode enabled in React Loading Inline kit page, all text and labels are now using $text_dk_light. [Story PLAY-1798](https://runway.powerhrg.com/backlog_items/PLAY-1798) **Screenshots:** Screenshots to visualize your addition/change <img width="891" alt="Screenshot 2025-01-16 at 8 16 05 AM" src="https://github.com/user-attachments/assets/842d010e-e1d7-4a06-8c6d-8c3188f77b22" /> **How to test?** Steps to confirm the desired behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See addition/change #### 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. - [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [ ] **TESTS** I have added test coverage to my code.
powerhome · Jan 22, 2025 · c4a812a · c4a812a
1 parent 7f99558
commit c4a812a
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx b/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
@@ -12,6 +12,7 @@ type LoadingInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
@@ -23,6 +24,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     aria = {},
     className,
     data = {},
+    dark = false,
     htmlOptions = {},
     id,
     text = ' Loading',
@@ -45,7 +47,10 @@ const LoadingInline = (props: LoadingInlineProps) => {
         className={classes}
         id={id}
     >
-      <Body color="light">
+      <Body
+          color="light"
+          dark={dark}
+      >
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth