From e783791fd05afe775b8863815f2b9d93ba3fbab0 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Tue, 19 Sep 2023 15:12:32 -0700
Subject: [PATCH] fix(callout): quote focus and image caption color

---
 .../scss/components/callout-quote/_callout-quote.scss  |  2 +-
 .../callout-with-media/_callout-with-media.scss        | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/styles/scss/components/callout-quote/_callout-quote.scss b/packages/styles/scss/components/callout-quote/_callout-quote.scss
index 707f089f1a4..3d566874c76 100644
--- a/packages/styles/scss/components/callout-quote/_callout-quote.scss
+++ b/packages/styles/scss/components/callout-quote/_callout-quote.scss
@@ -61,7 +61,6 @@
     display: inline-block;
     a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
       color: $link-primary;
-      outline-color: $focus-inverse;
 
       &:hover {
         color: $link-primary-hover;
@@ -76,6 +75,7 @@
   :host(#{$c4d-prefix}-callout-link-with-icon[color-scheme='inverse']) {
     a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
       color: $link-inverse;
+      outline-color: $focus-inverse;
 
       &:hover {
         // @carbon/styles has no hover color for $link-inverse.
diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
index 4d08107d597..54ab0ecec35 100644
--- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
+++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
@@ -91,35 +91,35 @@
     @extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']);
   }
 
-  :host(#{$c4d-prefix}-callout-with-media-image) .#{$prefix}--image__caption,
+  :host(#{$c4d-prefix}-callout-with-media-image) .#{$c4d-prefix}--image__caption,
   :host(#{$c4d-prefix}-callout-with-media-video)
     ::slotted(#{$c4d-prefix}-video-player) {
     @extend :host(#{$c4d-prefix}-callout-caption);
   }
 
   :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='inverse'])
-    .#{$prefix}--image__caption,
+    .#{$c4d-prefix}--image__caption,
   :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='inverse'])
     ::slotted(#{$c4d-prefix}-video-player) {
     @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='inverse']);
   }
 
   :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='layer'])
-    .#{$prefix}--image__caption,
+    .#{$c4d-prefix}--image__caption,
   :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='layer'])
     ::slotted(#{$c4d-prefix}-video-player) {
     @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='layer']);
   }
 
   :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='purple'])
-    .#{$prefix}--image__caption,
+    .#{$c4d-prefix}--image__caption,
   :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='purple'])
     ::slotted(#{$c4d-prefix}-video-player) {
     @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='purple']);
   }
 
   :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='cyan'])
-    .#{$prefix}--image__caption,
+    .#{$c4d-prefix}--image__caption,
   :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='cyan'])
     ::slotted(#{$c4d-prefix}-video-player) {
     @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']);