From 52c84d4483c31f8984532dac1297c2dc45a9cf69 Mon Sep 17 00:00:00 2001
From: Liam Simmons <160088184+Lsimmons98@users.noreply.github.com>
Date: Mon, 9 Dec 2024 09:43:19 -0500
Subject: [PATCH] [PLAY-1673] Dark Mode Audit - Caption and Title (#3961)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**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.
---
 .../pb_kits/playbook/pb_caption/_caption_mixin.scss |  3 ++-
 playbook/app/pb_kits/playbook/pb_title/_title.scss  | 11 ++++++-----
 .../app/pb_kits/playbook/pb_title/_title_mixin.scss | 13 +++++++++++++
 playbook/app/pb_kits/playbook/tokens/_titles.scss   |  8 --------
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_caption/_caption_mixin.scss b/playbook/app/pb_kits/playbook/pb_caption/_caption_mixin.scss
index 895f9bfb56..01b5c8b7fa 100755
--- a/playbook/app/pb_kits/playbook/pb_caption/_caption_mixin.scss
+++ b/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,
 );
 
 
diff --git a/playbook/app/pb_kits/playbook/pb_title/_title.scss b/playbook/app/pb_kits/playbook/pb_title/_title.scss
index ebe4e87ff4..ef42657280 100755
--- a/playbook/app/pb_kits/playbook/pb_title/_title.scss
+++ b/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;
+      }
+    }
   }
 }
diff --git a/playbook/app/pb_kits/playbook/pb_title/_title_mixin.scss b/playbook/app/pb_kits/playbook/pb_title/_title_mixin.scss
index 46b8935686..8fc0714bb7 100755
--- a/playbook/app/pb_kits/playbook/pb_title/_title_mixin.scss
+++ b/playbook/app/pb_kits/playbook/pb_title/_title_mixin.scss
@@ -9,6 +9,15 @@ $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}] {
@@ -16,3 +25,7 @@ $pb_title_colors: (
     }
   }
 }
+
+@mixin title_dark {
+  color: $text_dk_default;
+}
diff --git a/playbook/app/pb_kits/playbook/tokens/_titles.scss b/playbook/app/pb_kits/playbook/tokens/_titles.scss
index fad0b3091d..ef180c328f 100755
--- a/playbook/app/pb_kits/playbook/tokens/_titles.scss
+++ b/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;
 }