[PLAY-1673] Dark Mode Audit - Caption and Title (#3961)

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

Updates to dark mode styling based on audit for the Caption and Title
components.

[PLAY-1673](https://runway.powerhrg.com/backlog_items/PLAY-1673)

**Screenshots:** Screenshots to visualize your addition/change

<img width="1575" alt="Screenshot 2024-11-27 at 3 01 20 PM THIS ONE"
src="https://github.com/user-attachments/assets/9ec03795-69a4-4acf-82e1-f3e4dc7657f2">

<img width="1545" alt="Screenshot 2024-11-27 at 3 12 37 PM"
src="https://github.com/user-attachments/assets/730a6f19-591d-44b5-aefc-46726ffba165">


**How to test?** Steps to confirm the desired behavior:
1. Go to 'kits/title'
2. Scroll down to 'Colors' -- Title colors should now be dark mode
compatible
3. Go to 'kits/caption
4. Scroll down to 'Colors' -- Caption colors should now be dark mode
compatible


#### 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.

playbook/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -13,9 +13,10 @@ $pb_caption_colors: (
 $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
   link:           $active_dark,
   success:        $text_dk_success_sm,
-  error:          $error,
+  error:          $error_dark,
 );
 
 

playbook/app/pb_kits/playbook/pb_title/_title.scss

@@ -49,10 +49,11 @@
   }
 
   &.dark {
-    @include pb_title_dark; 
-  }
-
-  &.dark[class*=_link] { 
-    @include pb_title_dark_link; 
+    @include title_dark;
+    @each $name, $color in $pb_dark_title_colors {
+      &[class*="_#{$name}"] {
+        color: $color;
+      }
+    }
   }
 }

playbook/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -9,10 +9,23 @@ $pb_title_colors: (
   link: $primary
 );
 
+$pb_dark_title_colors: (
+  default: $text_dk_default,
+  light: $text_dk_light,
+  lighter: $text_dk_lighter,
+  success: $success,
+  error: $error_dark,
+  link: $active_dark
+);
+
 @mixin title_colors {
   @each $name, $color in $pb_title_colors {
     &[class*=_#{$name}] {
       color: $color
     }
   }
 }
+
+@mixin title_dark {
+  color: $text_dk_default;
+}

playbook/app/pb_kits/playbook/tokens/_titles.scss

@@ -33,14 +33,6 @@
   @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
-@mixin pb_title_dark {
-    color: $text_dk_default;
-} 
-
-@mixin pb_title_dark_link {
-    color: $active_dark;
-}
-
 @mixin pb_title_bold {
   font-weight: $bolder;
 }