From 259e2208d6985c6b46b8ff471bf4ac8ef6093b79 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Tue, 12 Sep 2023 12:19:00 -0400
Subject: [PATCH 1/3] feat(search-with-typeahead): v2 styles for
 search-with-typeahead (#10893)

* feat(search-with-typeahead): styling fixes

* feat(search-with-typeahead): fix alternate styles

* chore(docs): update migration doc

* chore(leadspace-with-search): apply sticky search to dotcom shell story

* feat(search-with-typeahead): font, border, and input text fix

* feat(search-with-typeahead): alternate search item divider

* feat(search-with-typeahead): close button width

* chore(snapshots): update snapshots

* chore(snapshots): update snapshots

---------

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
---
 docs/dotcom-v2-migration.md                   |  1 +
 .../_search-with-typeahead.scss               | 44 +++++++------------
 .../dotcom-shell/__stories__/data/content.ts  |  5 ++-
 .../search-with-typeahead.ts                  |  4 ++
 4 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
index bbe223d81e0..d06874964b3 100644
--- a/docs/dotcom-v2-migration.md
+++ b/docs/dotcom-v2-migration.md
@@ -39,6 +39,7 @@ For Carbon v11 migration guidance, see their
 | link-list-section         | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components |
 | logo-grid                 | This component is deprecated in v2 in favor for content-section/block & image-group components |
 | pictogram-item            | This component is deprecated in v2 in favor for content-item (pictogram variation) componet |
+| search-with-typeahead     | No API changes.                        |
 | tabs-extended-media       | This component is deprecated in v2 in favor for tabs-extended component |
 
 
diff --git a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss
index 2eda77f05ab..2231d08d3a3 100644
--- a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss
+++ b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss
@@ -18,7 +18,7 @@
 @use '../../globals/vars' as *;
 @use '../masthead/vars' as *;
 
-%react-autosuggest-suggestion {
+@mixin react-autosuggest-suggestion {
   color: $text-primary;
   height: $spacing-09;
   display: flex;
@@ -194,15 +194,17 @@
     position: relative;
     outline: none;
     height: $spacing-09;
-    margin-left: rem($spacing-09);
+    margin-left: $spacing-09;
 
     .#{$c4d-prefix}-ce__search__list {
       height: 0;
       overflow: hidden;
+      margin: 0;
     }
 
     &[open] .#{$c4d-prefix}-ce__search__list {
       height: auto;
+      padding: 0;
     }
 
     &[active] {
@@ -212,6 +214,7 @@
 
       button.#{$prefix}--header__search--close.#{$prefix}--header__action[part='close-button'] {
         display: inline-flex;
+        min-width: $spacing-09;
       }
 
       button.#{$prefix}--header__search--close.#{$prefix}--header__action.#{$prefix}--header__search--hide {
@@ -229,7 +232,7 @@
           bottom: 0;
           left: 0;
           display: block;
-          border-bottom: $spacing-01 solid $background-brand;
+          border-bottom: $spacing-01 solid $border-interactive;
           width: 100%;
           height: $spacing-01;
           z-index: 10002;
@@ -243,6 +246,7 @@
         outline: $spacing-01 solid transparent;
         outline-offset: -#{$spacing-01};
         background-color: $layer-01;
+        color: $text-primary;
         height: carbon--mini-units(6);
         z-index: 10000;
 
@@ -297,10 +301,6 @@
 
       top: 0;
 
-      @include breakpoint(md) {
-        height: $spacing-10;
-      }
-
       &:focus {
         outline: $spacing-01 solid $focus;
         .#{$prefix}--header__search--actions {
@@ -334,10 +334,6 @@
       form {
         width: 100%;
         padding-left: $spacing-09;
-
-        @include breakpoint(md) {
-          height: $spacing-10;
-        }
       }
 
       .react-autosuggest__container {
@@ -347,11 +343,7 @@
       }
 
       .react-autosuggest__suggestions-container {
-        top: rem(50px);
-
-        @include breakpoint(md) {
-          top: rem(66px);
-        }
+        top: calc($spacing-09 + 2px);
       }
 
       .react-autosuggest__suggestions-list {
@@ -361,16 +353,6 @@
       .#{$prefix}--header__search--input {
         color: $text-primary;
         border-bottom: none;
-
-        @include breakpoint(md) {
-          height: $spacing-10;
-        }
-      }
-
-      .#{$prefix}--header__search--close {
-        @include breakpoint(md) {
-          height: $spacing-10;
-        }
       }
 
       &[large] {
@@ -461,10 +443,12 @@
   }
 
   .react-autosuggest__suggestion {
-    @extend %react-autosuggest-suggestion;
+    @include react-autosuggest-suggestion;
   }
 
   .#{$prefix}--header__search--input {
+    @include font-family('sans');
+
     font-size: $spacing-05;
     line-height: 1.375rem;
     border: none;
@@ -482,7 +466,7 @@
 }
 
 :host(#{$c4d-prefix}-search-with-typeahead-item) {
-  @extend %react-autosuggest-suggestion;
+  @include react-autosuggest-suggestion;
 
   span {
     white-space: pre;
@@ -510,6 +494,10 @@
   }
 }
 
+:host(#{$c4d-prefix}-search-with-typeahead-item[alternate]) {
+  border-top: 1px solid $border-subtle-01;
+}
+
 :host(#{$c4d-prefix}-scoped-search-dropdown),
 :host(#{$c4d-prefix}-scoped-search-dropdown-mobile) {
   display: flex;
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
index 75c3e31e96d..eaeee43ddf2 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
@@ -184,7 +184,10 @@ export const contentLeadspace = html`
 `;
 
 export const contentLeadspaceSearch = html`
-  <c4d-leadspace-with-search adjacent-theme="white-and-g10" scroll-behavior>
+  <c4d-leadspace-with-search
+    adjacent-theme="white-and-g10"
+    sticky-search
+    scroll-behavior>
     <c4d-leadspace-with-search-heading
       >Find a product</c4d-leadspace-with-search-heading
     >
diff --git a/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.ts b/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.ts
index 84bd3cd86d9..4e1d8fb0829 100644
--- a/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.ts
+++ b/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.ts
@@ -384,6 +384,10 @@ class C4DSearchWithTypeahead extends HostListenerMixin(
       (this.constructor as typeof CDSDropdown).selectorItem
     );
     items.forEach((e) => {
+      if (this.leadspaceSearch) {
+        e.setAttribute('alternate', '');
+      }
+
       if (e.hasAttribute('highlighted')) {
         this.setAttribute('unfocused', '');
       }

From cd8425991d16f1598af8a4eb6f84669d1bc82d28 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Tue, 12 Sep 2023 11:07:23 -0700
Subject: [PATCH 2/3] feat(card): v2 card style updates (#10903)

* feat(card): v2 card style updates

* feat(card): move card styles to styles package

* feat(card): react wrapper storybook changes

* feat(card): aspect ratio property

* feat(card): fix focus state style

* feat(card): style adjustments

* feat(card): import tag theme colors

* chore(merge): edit from merge conflict

* chore(styles): revert back to styles package

* test(formatVideoCaption): edit test to include min

* chore(styles): use calc
---
 docs/dotcom-v2-migration.md                   |   7 ++
 .../styles/scss/components/card/_card.scss    | 115 ++++++++++++++----
 .../scss/globals/utils/_aspect-ratio.scss     |   2 +-
 .../scss/globals/utils/_ratio-base.scss       |   2 +-
 .../__tests__/formatVideoCaption.test.js      |   6 +-
 .../formatVideoCaption/formatVideoCaption.js  |   9 +-
 .../web-components/.storybook/container.scss  |   2 +
 .../src/component-mixins/cta/cta.ts           |   4 +-
 .../src/component-mixins/cta/video.ts         |   4 +-
 .../card/__stories__/README.stories.mdx       |  97 ++++++++-------
 .../card/__stories__/README.stories.react.mdx |  19 ++-
 .../card/__stories__/card.stories.react.tsx   |  51 ++------
 .../card/__stories__/card.stories.ts          |  49 +++-----
 .../src/components/card/card-footer.ts        |  21 +---
 .../src/components/card/card.scss             |  43 -------
 .../src/components/card/card.ts               |  10 --
 .../cta/__stories__/ctaTypeConfig.js          |   2 +-
 17 files changed, 213 insertions(+), 230 deletions(-)

diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
index d06874964b3..7ca5c698b3c 100644
--- a/docs/dotcom-v2-migration.md
+++ b/docs/dotcom-v2-migration.md
@@ -18,6 +18,7 @@ For Carbon v11 migration guidance, see their
 | back-to-top               | View changes [here](#backtotop)        |
 | background-media          | No API changes.                        |
 | button                    | This component is deprecated in v2 in favor for Carbon's core Button |
+| card                      | View changes [here] (#card)            |
 | card-group-card-link-item | This component is deprecated in v2 in favor for default card or with content-item |
 | card-link                 | This component is deprecated in v2 in favor for card (link variant) component |
 | card-section-carousel     | This component is deprecated in v2 in favor for content-section/block component combined with carousel |
@@ -47,6 +48,12 @@ For Carbon v11 migration guidance, see their
 
 - 
 
+### Card
+
+- `<dds-card-footer>` has `icon-placement` property has been removed
+- Removed `border` property, clickable cards inherit the Carbon v11 experimental tile border style
+- New `aspect-ratio` property with '1:1', '2:1', '3:2', '4:3', and '16:9' as options
+
 ### CTA
 
 In Carbon for IBM.com v2, the CTA component (and all of its subcomponents) have been deprecated in favor of their base components.
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index 94568642df0..c36f71eb7d1 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -18,8 +18,19 @@
 @use '../../globals/utils/content-width' as *;
 @use '../../globals/utils/ratio-base' as *;
 @use '../lightbox-media-viewer/lightbox-media-viewer';
+@use '../link-with-icon/link-with-icon';
 
 @mixin card {
+  .#{$prefix}--card,
+  :host(#{$c4d-prefix}-card),
+  :host(#{$c4d-prefix}-card-cta),
+  :host(#{$c4d-prefix}-card-group-item),
+  :host(#{$c4d-prefix}-card-group-item) .#{$prefix}--card,
+  :host(#{$c4d-prefix}-content-group-cards-item),
+  :host(#{$c4d-prefix}-content-group-cards-item) .#{$prefix}--card {
+    @include tile($enable-experimental-tile-contrast: true);
+  }
+
   .#{$prefix}--card,
   :host(#{$c4d-prefix}-card),
   :host(#{$c4d-prefix}-link-list-item-card),
@@ -40,8 +51,8 @@
     padding: 0;
     transition: $duration-moderate-01 motion(standard, productive);
 
-    &:hover {
-      background-color: $background-hover;
+    .#{$prefix}-tile--clickable:hover {
+      background-color: $layer-hover-01;
       text-decoration: none;
 
       .#{$prefix}--card__wrapper {
@@ -83,10 +94,12 @@
     }
 
     &:focus-within {
-      outline: $spacing-01 solid $focus;
-      outline-offset: -#{$spacing-01};
-      position: relative;
-      z-index: 2;
+      .#{$prefix}--tile--clickable {
+        outline: $spacing-01 solid $focus;
+        outline-offset: -#{$spacing-01};
+        position: relative;
+        z-index: 2;
+      }
 
       ::slotted(#{$c4d-prefix}-image),
       ::slotted(#{$c4d-prefix}-card-cta-image),
@@ -175,7 +188,7 @@
     }
 
     .#{$prefix}--card__copy:not([hidden]) {
-      @include type-style('body-compact-02');
+      @include type-style('body-02');
 
       margin-bottom: $spacing-07;
     }
@@ -191,6 +204,21 @@
     }
   }
 
+  :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {
+    @include ratio-base(1, 1, false);
+  }
+
+  :host(#{$c4d-prefix}-card[aspect-ratio='3:2']) .#{$prefix}--card__wrapper {
+    @include ratio-base(3, 2, false);
+  }
+
+  :host(#{$c4d-prefix}-card[aspect-ratio='4:3']) .#{$prefix}--card__wrapper {
+    @include ratio-base(4, 3, false);
+  }
+
+  :host(#{$c4d-prefix}-card[aspect-ratio='16:9']) .#{$prefix}--card__wrapper {
+    @include ratio-base(16, 9, false);
+  }
   .#{$prefix}--card.#{$prefix}--card--light {
     background-color: $layer-02;
   }
@@ -211,7 +239,7 @@
 
         svg,
         .#{$prefix}--card__cta__copy {
-          color: $link-primary-hover;
+          color: $text-primary;
         }
       }
 
@@ -350,7 +378,7 @@
     .#{$c4d-prefix}-ce--card__footer
     ::slotted(svg[slot='icon']) {
     margin-left: 0;
-    color: $link-primary;
+    color: $icon-interactive;
   }
 
   :host(#{$c4d-prefix}-card-footer[disabled])
@@ -419,8 +447,8 @@
     .#{$prefix}--card__cta__copy {
       max-width: calc(100% - 20px - #{$spacing-03});
       margin-right: $spacing-03;
-      color: $link-primary;
-      @include type-style('body-compact-02');
+      color: $text-primary;
+      @include type-style('body-02');
     }
 
     .#{$prefix}--card__footer__copy {
@@ -436,14 +464,6 @@
     }
   }
 
-  :host(#{$c4d-prefix}-card-footer) a,
-  :host(#{$c4d-prefix}-card-cta-footer) a,
-  :host(#{$c4d-prefix}-card-in-card-footer) a {
-    @include breakpoint(md) {
-      padding-right: $spacing-07;
-    }
-  }
-
   :host(#{$c4d-prefix}-feature-cta-footer) a {
     svg,
     ::slotted(svg[slot='icon']) {
@@ -495,7 +515,9 @@
   :host(#{$c4d-prefix}-card)[color-scheme='inverse'],
   :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']
     .#{$prefix}--card {
-    background-color: $background-inverse;
+    .#{$prefix}--tile {
+      background-color: $background-inverse;
+    }
 
     .#{$prefix}--card__wrapper:hover {
       background-color: $background-inverse-hover;
@@ -532,7 +554,7 @@
         bottom: 0;
         right: 0;
         border: $spacing-01 solid $focus;
-        outline: 1px solid $focus-inverse;
+        outline: 1px solid $focus-inset;
         outline-offset: -3px;
         pointer-events: none;
       }
@@ -548,7 +570,7 @@
   }
 
   :host(#{$c4d-prefix}-card-heading) {
-    @include type-style('fluid-heading-03', true);
+    @include type-style('heading-03', true);
   }
 
   :host(#{$c4d-prefix}-card-link-heading) {
@@ -561,13 +583,10 @@
   :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse'],
   :host(#{$c4d-prefix}-feature-section-card-link)[color-scheme='inverse'],
   .#{$prefix}--card-group__card {
-    ::slotted(#{$c4d-prefix}-card-eyebrow) {
-      color: $text-placeholder;
-    }
-
+    ::slotted(#{$c4d-prefix}-card-eyebrow),
     ::slotted(#{$c4d-prefix}-card-heading),
     ::slotted(#{$c4d-prefix}-card-link-heading) {
-      color: $icon-inverse;
+      color: $text-inverse;
     }
 
     &:hover {
@@ -801,4 +820,46 @@
       gap: $spacing-05;
     }
   }
+
+  :host(#{$c4d-prefix}-card-footer),
+  :host(#{$c4d-prefix}-card-cta-footer) {
+    .#{$c4d-prefix}-ce--card__footer--static {
+      color: $link-primary;
+    }
+
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      display: flex;
+      width: 100%;
+      justify-content: flex-end;
+    }
+
+    &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static {
+      color: $link-inverse;
+    }
+
+    &[color-scheme='inverse']
+      .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      svg,
+      ::slotted(svg[slot='icon']) {
+        color: $link-inverse;
+      }
+    }
+
+    &:hover {
+      ::slotted(svg[slot='icon']) {
+        color: $link-primary-hover;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-cta-footer[cta-type='video']),
+  :host(#{$c4d-prefix}-card-footer[cta-type='video']) {
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      justify-content: space-between;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-footer[href])::after {
+    position: relative;
+  }
 }
diff --git a/packages/styles/scss/globals/utils/_aspect-ratio.scss b/packages/styles/scss/globals/utils/_aspect-ratio.scss
index 8984dd21621..0df69521af2 100644
--- a/packages/styles/scss/globals/utils/_aspect-ratio.scss
+++ b/packages/styles/scss/globals/utils/_aspect-ratio.scss
@@ -14,6 +14,6 @@
 //
 // @return percentage of height vs width
 @function aspect-ratio($width, $height) {
-  $ratio: $height / $width * 100%;
+  $ratio: calc($height / $width) * 100%;
   @return $ratio;
 }
diff --git a/packages/styles/scss/globals/utils/_ratio-base.scss b/packages/styles/scss/globals/utils/_ratio-base.scss
index fe064ee2fe1..b17108c2e02 100644
--- a/packages/styles/scss/globals/utils/_ratio-base.scss
+++ b/packages/styles/scss/globals/utils/_ratio-base.scss
@@ -6,7 +6,7 @@
  */
 
 // mixin to give the ratio for lays doen for an aspect ratio
-@use '../../globals/utils/aspect-ratio';
+@use '../../globals/utils/aspect-ratio' as *;
 
 @mixin ratio-base($height, $width, $fixed) {
   @if ($fixed) {
diff --git a/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js b/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js
index ec5f585c80e..75e541dbc04 100644
--- a/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js
+++ b/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js
@@ -42,15 +42,15 @@ describe('g11n formatter for video caption', () => {
     });
 
     it('should fill zero for minutes', async () => {
-      expect(formatVideoDuration({ duration: 30000 })).toBe('0:30');
+      expect(formatVideoDuration({ duration: 30000 })).toBe('0:30 min');
     });
 
     it('should fill zero for seconds', async () => {
-      expect(formatVideoDuration({ duration: 65000 })).toBe('1:05');
+      expect(formatVideoDuration({ duration: 65000 })).toBe('1:05 min');
     });
 
     it('should support more than 1 minute', async () => {
-      expect(formatVideoDuration({ duration: 90000 })).toBe('1:30');
+      expect(formatVideoDuration({ duration: 90000 })).toBe('1:30 min');
     });
   });
 });
diff --git a/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js b/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js
index 8249fd55d90..6118dbca2fe 100644
--- a/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js
+++ b/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js
@@ -33,10 +33,17 @@ export function formatVideoCaption({ duration, name } = {}) {
  * @returns {string} The formatted video duration.
  */
 export function formatVideoDuration({ duration } = {}) {
+  const hours = Math.floor(((duration ?? 0) / (1000 * 60 * 60)) % 24);
   const minutes = Math.floor((duration ?? 0) / 60000);
   const seconds = Math.floor(((duration ?? 0) / 1000) % 60);
+
   const fillSeconds = Array.from({
     length: 2 - String(seconds).length + 1,
   }).join('0');
-  return duration == null ? duration : `${minutes}:${fillSeconds}${seconds}`;
+
+  return duration == null
+    ? duration
+    : hours
+    ? `${hours}:${minutes} hr`
+    : `${minutes}:${fillSeconds}${seconds} min`;
 }
diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
index e388d304c63..e8d1f936969 100644
--- a/packages/web-components/.storybook/container.scss
+++ b/packages/web-components/.storybook/container.scss
@@ -12,6 +12,8 @@
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/grid';
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include add-component-tokens(tag-tokens.$tag-tokens);
 
 // Emit the flex-grid styles
 @include grid.flex-grid();
diff --git a/packages/web-components/src/component-mixins/cta/cta.ts b/packages/web-components/src/component-mixins/cta/cta.ts
index 0c0417f0e03..772305e7231 100644
--- a/packages/web-components/src/component-mixins/cta/cta.ts
+++ b/packages/web-components/src/component-mixins/cta/cta.ts
@@ -14,7 +14,7 @@ import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arr
 import Download20 from '../../internal/vendor/@carbon/web-components/icons/download/20.js';
 import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
 import Launch20 from '../../internal/vendor/@carbon/web-components/icons/launch/20.js';
-import PlayOutline20 from '../../internal/vendor/@carbon/web-components/icons/play--outline/20.js';
+import PlayFilledAlt20 from '../../internal/vendor/@carbon/web-components/icons/play--filled--alt/20.js';
 import Blog20 from '../../internal/vendor/@carbon/web-components/icons/blog/20.js';
 import DocumentPDF20 from '../../internal/vendor/@carbon/web-components/icons/document--pdf/20.js';
 import NewTab20 from '../../internal/vendor/@carbon/web-components/icons/new-tab/20.js';
@@ -41,7 +41,7 @@ export const icons = {
   [CTA_TYPE.EXTERNAL]: Launch20,
   [CTA_TYPE.NEW_TAB]: NewTab20,
   [CTA_TYPE.JUMP]: ArrowDown20,
-  [CTA_TYPE.VIDEO]: PlayOutline20,
+  [CTA_TYPE.VIDEO]: PlayFilledAlt20,
   [CTA_TYPE.PDF]: DocumentPDF20,
   [CTA_TYPE.BLOG]: Blog20,
   [CTA_TYPE.EMAIL]: Email20,
diff --git a/packages/web-components/src/component-mixins/cta/video.ts b/packages/web-components/src/component-mixins/cta/video.ts
index 7c0fe0ba6c0..eda1b70e95c 100644
--- a/packages/web-components/src/component-mixins/cta/video.ts
+++ b/packages/web-components/src/component-mixins/cta/video.ts
@@ -11,7 +11,7 @@ import ArrowDown20 from '../../internal/vendor/@carbon/web-components/icons/arro
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import Download20 from '../../internal/vendor/@carbon/web-components/icons/download/20.js';
 import Launch20 from '../../internal/vendor/@carbon/web-components/icons/launch/20.js';
-import PlayOutline20 from '../../internal/vendor/@carbon/web-components/icons/play--outline/20.js';
+import PlayFilledAlt20 from '../../internal/vendor/@carbon/web-components/icons/play--filled--alt/20.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { Constructor } from '../../globals/defs';
 import { CTA_TYPE } from '../../components/cta/defs';
@@ -27,7 +27,7 @@ export const icons = {
   [CTA_TYPE.DOWNLOAD]: Download20,
   [CTA_TYPE.EXTERNAL]: Launch20,
   [CTA_TYPE.JUMP]: ArrowDown20,
-  [CTA_TYPE.VIDEO]: PlayOutline20,
+  [CTA_TYPE.VIDEO]: PlayFilledAlt20,
 };
 
 /**
diff --git a/packages/web-components/src/components/card/__stories__/README.stories.mdx b/packages/web-components/src/components/card/__stories__/README.stories.mdx
index f980a721a98..e9332229bab 100644
--- a/packages/web-components/src/components/card/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card/__stories__/README.stories.mdx
@@ -31,10 +31,10 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js';
 ### HTML
 
 ```html
-<cds-card href="https://example.com">
-  <cds-card-eyebrow>Eyebrow text</cds-card-eyebrow>
-  <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
-  <cds-card-footer slot="footer">
+<c4d-card href="https://example.com">
+  <c4d-card-eyebrow>Eyebrow text</c4d-card-eyebrow>
+  <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+  <c4d-card-footer slot="footer">
     Card CTA text
     <svg
       slot="icon"
@@ -49,8 +49,8 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js';
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-card-footer>
-</cds-card>
+  </c4d-card-footer>
+</c4d-card>
 ```
 
 ## Card with pictogram
@@ -61,11 +61,11 @@ to find a pictogram that fits your design. You can also check out the repo
 [here](https://github.com/carbon-design-system/carbon/tree/main/packages/pictograms)
 
 ```html
-<cds-card
+<c4d-card
   pictogram-placement="${pictogramPlacement}"
   href="https://example.com">
-  <cds-card-eyebrow>Eyebrow text</cds-card-eyebrow>
-  <cds-card-heading>Lorem ipsum dolor</cds-card-heading>
+  <c4d-card-eyebrow>Eyebrow text</c4d-card-eyebrow>
+  <c4d-card-heading>Lorem ipsum dolor</c4d-card-heading>
   <p>Copy to be shown on hover if the pictogram placement is bottom</p>
   <svg
     slot="pictogram"
@@ -73,13 +73,13 @@ to find a pictogram that fits your design. You can also check out the repo
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     stroke="currentColor"
-    data-autoid="cds--card__pictogram"
+    data-autoid="c4d--card__pictogram"
     aria-label="Pictogram description"
     width="48"
     height="48"
     viewBox="0 0 48 48"
     role="img"
-    class="cds--card__pictogram">
+    class="c4d--card__pictogram">
     <path
       fill="none"
       stroke-linejoin="round"
@@ -87,7 +87,7 @@ to find a pictogram that fits your design. You can also check out the repo
       stroke-width=".72"
       d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"></path>
   </svg>
-</cds-card>
+</c4d-card>
 ```
 
 ## Card - static
@@ -97,16 +97,16 @@ variation will be rendered, where the card is no longer clickable and optional
 `Tag` elements can also be added.
 
 ```html
-<cds-card>
-  <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+<c4d-card>
+  <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
   ${copy ? html`
   <p>${copy}</p>
   ` : ``}
-  <cds-tag-group>
+  <c4d-tag-group>
     <cds-tag> Most popular </cds-tag>
     <cds-tag type="purple"> Enterprise </cds-tag>
-  </cds-tag-group>
-  <cds-card-footer href="https://example.com" icon-placement="right">
+  </c4d-tag-group>
+  <c4d-card-footer href="https://example.com" icon-placement="right">
     Card CTA text
     <svg
       slot="icon"
@@ -121,8 +121,8 @@ variation will be rendered, where the card is no longer clickable and optional
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-card-footer>
-</cds-card>
+  </c4d-card-footer>
+</c4d-card>
 ```
 
 ## Card - logo
@@ -131,22 +131,22 @@ If you need to use a Logo image for the Card component, use the Logo variant to
 ensure the Card properly accomodates to the Logo image.
 
 ```html
-<cds-card border logo href="https://example.com">
-  <cds-image-logo
+<c4d-card border logo href="https://example.com">
+  <c4d-image-logo
     slot="image"
     alt="Image logo alt text"
-    default-src="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616"></cds-image-logo>
-  <cds-card-eyebrow>Microsoft</cds-card-eyebrow>
+    default-src="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616"></c4d-image-logo>
+  <c4d-card-eyebrow>Microsoft</c4d-card-eyebrow>
   <p>
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
     aliquip ex ea commodo consequat.
   </p>
-  <cds-tag-group>
+  <c4d-tag-group>
     <cds-tag> Most popular </cds-tag>
     <cds-tag type="purple"> Enterprise </cds-tag>
-  </cds-tag-group>
-  <cds-card-footer href="https://example.com"></cds-card-footer>
-</cds-card>
+  </c4d-tag-group>
+  <c4d-card-footer href="https://example.com"></c4d-card-footer>
+</c4d-card>
 ```
 
 ## Light theme
@@ -154,27 +154,38 @@ ensure the Card properly accomodates to the Logo image.
 An optional light theme is available under `color-scheme`.
 
 ```html
-<cds-card color-scheme="light"></cds-card>
+<c4d-card color-scheme="light"></c4d-card>
+```
+
+## Tags
+
+If using tags within `dds-card` in tandem with the dark themes, make sure the
+proper styles are imported from `@carbon/styles` in your application.
+
+```
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include add-component-tokens(tag-tokens.$tag-tokens);
 ```
 
 ## Card with image
 
-To add image to the `cds-card`, import the `image` component and place
-`cds-image` within `cds-card`:
+To add image to the `c4d-card`, import the `image` component and place
+`c4d-image` within `c4d-card`:
 
 ```javascript
 import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
 ```
 
 ```html
-<cds-card>
-  <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
-  <cds-image slot="image" alt="alt text" default-src="../image.png"></cds-image>
-  <cds-tag-group>
+<c4d-card>
+  <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+  <c4d-image slot="image" alt="alt text" default-src="../image.png"></c4d-image>
+  <c4d-tag-group>
     <cds-tag> Most popular </cds-tag>
     <cds-tag type="purple"> Enterprise </cds-tag>
-  </cds-tag-group>
-  <cds-card-footer href="https://example.com" icon-placement="right">
+  </c4d-tag-group>
+  <c4d-card-footer href="https://example.com" icon-placement="right">
     Card CTA text
     <svg
       slot="icon"
@@ -189,8 +200,8 @@ import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </cds-card-footer>
-</cds-card>
+  </c4d-card-footer>
+</c4d-card>
 ```
 
 ### CTA features
@@ -218,19 +229,19 @@ following:
 Notes for `video`:
 
 - You need to pass the video ID as the `href` attribute.
-- The Card component will need to be wrapped within a `cds-video-cta-container`
+- The Card component will need to be wrapped within a `c4d-video-cta-container`
   components for videos to play.
-- If left empty, the `cds-card-footer` can display the video duration. If not,
+- If left empty, the `c4d-card-footer` can display the video duration. If not,
   it will be overridden with custom text.
 
 General note:
 
-- Custom icons can replace the built-in ones within `cds-card-footer`, they only
+- Custom icons can replace the built-in ones within `c4d-card-footer`, they only
   need to be assigned to the `icon` slot.
 
 ## Props
 
-<Props of="cds-card" />
+<Props of="c4d-card" />
 
 ## Stable selectors
 
@@ -240,6 +251,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector    | Description |
 | ----------------------- | ------------------------- | ----------- |
-| `<cds-card>`            | `data-autoid="cds--card"` | Component   |
+| `<c4d-card>`            | `data-autoid="c4d--card"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card/__stories__/README.stories.react.mdx
index 6fb486b4706..8e8eba67479 100644
--- a/packages/web-components/src/components/card/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card/__stories__/README.stories.react.mdx
@@ -145,6 +145,17 @@ An optional light theme is available under `color-scheme`.
 <C4DCard colorScheme='light'>
 ```
 
+## Tags
+
+If using tags within `dds-card` in tandem with the dark themes, make sure the
+proper styles are imported from `@carbon/styles` in your application.
+
+```
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include add-component-tokens(tag-tokens.$tag-tokens);
+```
+
 ## Card with image
 
 To add image to the `C4DCard`, import the `C4DImage` component and place
@@ -191,7 +202,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<cds-card>`            | `data-autoid="cds--card"`         | Component   |
-| `<cds-card-eyebrow>`    | `data-autoid="cds--card-eyebrow"` | Component   |
-| `<cds-card-heading>`    | `data-autoid="cds--card-heading"` | Component   |
-| `<cds-card-footer>`     | `data-autoid="cds--card-footer"`  | Component   |
+| `<c4d-card>`            | `data-autoid="c4d--card"`         | Component   |
+| `<c4d-card-eyebrow>`    | `data-autoid="c4d--card-eyebrow"` | Component   |
+| `<c4d-card-heading>`    | `data-autoid="c4d--card-heading"` | Component   |
+| `<c4d-card-footer>`     | `data-autoid="c4d--card-footer"`  | Component   |
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
index 68697cc6851..a50625099c6 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
+++ b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
@@ -44,15 +44,8 @@ export const Default = (args) => {
   return (
     /* eslint-disable no-nested-ternary */
     <C4DCard
-      colorScheme={
-        cardStyles === 'Inverse card'
-          ? 'inverse'
-          : cardStyles === 'Outlined card'
-          ? 'light'
-          : ''
-      }
-      href={href || undefined}
-      border={cardStyles === 'Outlined card'}>
+      colorScheme={cardStyles === 'Inverse card' ? 'inverse' : ''}
+      href={href || undefined}>
       {image ? (
         <C4DImage
           slot="image"
@@ -94,11 +87,7 @@ Default.story = {
         tagGroup: boolean('Add tags:', false),
         href: 'https://example.com',
         footer: textNullable('CTA:', 'Learn more'),
-        cardStyles: select(
-          'Card style:',
-          ['Outlined card', 'Inverse card', 'none'],
-          'none'
-        ),
+        cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'),
       }),
     },
   },
@@ -116,14 +105,7 @@ export const Pictogram = (args) => {
     <C4DCard
       pictogramPlacement={pictogramPlacement}
       href={href || undefined}
-      colorScheme={
-        cardStyles === 'Inverse card'
-          ? 'inverse'
-          : cardStyles === 'Outlined card'
-          ? 'light'
-          : ''
-      }
-      border={cardStyles === 'Outlined card'}>
+      colorScheme={cardStyles === 'Inverse card' ? 'inverse' : ''}>
       <C4DCardHeading>{heading}</C4DCardHeading>
       {copy ? <p>{copy}</p> : ''}
       {tagGroup ? (
@@ -157,11 +139,7 @@ Pictogram.story = {
           heading: textNullable('Heading:', 'Aerospace and defence'),
           copy,
           href: 'https://example.com',
-          cardStyles: select(
-            'Card style:',
-            ['Outlined card', 'Inverse card', 'none'],
-            'none'
-          ),
+          cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'),
         };
       },
     },
@@ -169,19 +147,10 @@ Pictogram.story = {
 };
 
 export const Static = (args) => {
-  const {
-    image,
-    alt,
-    defaultSrc,
-    outlinedCard,
-    eyebrow,
-    heading,
-    copy,
-    tagGroup,
-    cta,
-  } = args?.StaticCard ?? {};
+  const { image, alt, defaultSrc, eyebrow, heading, copy, tagGroup, cta } =
+    args?.StaticCard ?? {};
   return (
-    <C4DCard colorScheme={outlinedCard ? 'light' : ''} border={outlinedCard}>
+    <C4DCard>
       {image ? (
         <C4DImage
           slot="image"
@@ -232,7 +201,6 @@ Static.story = {
         const ctaCopy = cta
           ? textNullable('CTA copy:', 'Sign up for the trial')
           : '';
-        const outlinedCard = boolean('Outlined card:', true);
         return {
           alt: 'Image alt text',
           defaultSrc: imgXlg4x3,
@@ -243,7 +211,6 @@ Static.story = {
           tagGroup,
           cta,
           ctaCopy,
-          outlinedCard,
         };
       },
     },
@@ -254,7 +221,7 @@ export const Logo = (args) => {
   const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } =
     args?.Card ?? {};
   return (
-    <C4DCard border logo href={href || undefined}>
+    <C4DCard logo href={href || undefined}>
       <C4DImageLogo
         slot="image"
         alt={alt}
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
index 400685d7fb7..fcf1203a1ea 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.ts
+++ b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -39,6 +39,7 @@ const tagGroupContent = html`
 
 export const Default = (args) => {
   const {
+    aspectRatio,
     ctaType,
     noPoster,
     image,
@@ -49,7 +50,6 @@ export const Default = (args) => {
     eyebrow,
     tagGroup,
     copy,
-    footer,
     cardStyles,
     customVideoTitle,
   } = args?.Card ?? {};
@@ -68,22 +68,16 @@ export const Default = (args) => {
       videoCopy = customVideoTitle;
     }
 
-    if (!footer) {
-      videoFooterCopy = duration;
-    }
+    videoFooterCopy = duration;
   }
 
   return html`
     <c4d-video-cta-container>
       <c4d-card
+        aspect-ratio=${aspectRatio}
         ?no-poster=${noPoster}
         cta-type=${ctaType}
-        color-scheme=${cardStyles === 'Inverse card'
-          ? 'inverse'
-          : cardStyles === 'Outlined card'
-          ? 'light'
-          : ''}
-        ?border=${cardStyles === 'Outlined card'}
+        color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}
         href=${ifDefined(href || undefined)}>
         ${image
           ? html`
@@ -97,7 +91,7 @@ export const Default = (args) => {
         <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
         ${copy ? html` <p>${copy}</p> ` : ``}
         ${tagGroup ? html` ${tagGroupContent} ` : ``}
-        <c4d-card-footer> ${videoFooterCopy ?? footer} </c4d-card-footer>
+        <c4d-card-footer> ${videoFooterCopy ?? ''} </c4d-card-footer>
       </c4d-card>
     </c4d-video-cta-container>
   `;
@@ -113,6 +107,11 @@ Default.story = {
     ...readme.parameters,
     knobs: {
       Card: () => {
+        const aspectRatio = select(
+          'Aspect ratio (aspect-ratio)',
+          ['1:1', '2:1', '3:2', '4:3', '16:9', '1:1'],
+          '2:1'
+        );
         const ctaType = select(
           'CTA type (cta-type)',
           typeOptions,
@@ -135,6 +134,7 @@ Default.story = {
           ctaType === CTA_TYPE.VIDEO ? boolean('No poster:', false) : null;
 
         return {
+          aspectRatio,
           customVideoTitle,
           ctaType,
           image,
@@ -149,12 +149,7 @@ Default.story = {
             knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
             hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
           ),
-          footer: textNullable('CTA:', 'Learn more'),
-          cardStyles: select(
-            'Card style:',
-            ['Outlined card', 'Inverse card', 'none'],
-            'none'
-          ),
+          cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'),
         };
       },
     },
@@ -169,7 +164,6 @@ Default.story = {
           defaultSrc: imgXlg4x3,
           tagGroup: false,
           href: 'https://example.com',
-          footer: 'Learn more',
           cardStyles: 'none',
         },
       },
@@ -184,12 +178,7 @@ export const Pictogram = (args) => {
     <c4d-card
       pictogram-placement="${pictogramPlacement}"
       href=${ifDefined(href || undefined)}
-      color-scheme=${cardStyles === 'Inverse card'
-        ? 'inverse'
-        : cardStyles === 'Outlined card'
-        ? 'light'
-        : ''}
-      ?border=${cardStyles === 'Outlined card'}>
+      color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}>
       <c4d-card-heading>${heading}</c4d-card-heading>
       ${copy ? html` <p>${copy}</p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
@@ -244,7 +233,7 @@ Pictogram.story = {
           href: 'https://example.com',
           cardStyles: select(
             'Card style:',
-            ['Outlined card', 'Inverse card', 'none'],
+            ['Inverse card', 'none'],
             'none',
             'pictogram'
           ),
@@ -271,7 +260,6 @@ export const Static = (args) => {
     image,
     alt,
     defaultSrc,
-    outlinedCard,
     eyebrow,
     heading,
     copy,
@@ -280,9 +268,7 @@ export const Static = (args) => {
     ctaCopy,
   } = args?.Card ?? {};
   return html`
-    <c4d-card
-      color-scheme=${outlinedCard ? 'light' : ''}
-      ?border=${outlinedCard}>
+    <c4d-card>
       ${image
         ? html`
             <c4d-image
@@ -325,7 +311,6 @@ Static.story = {
         const ctaCopy = cta
           ? textNullable('CTA copy:', 'Sign up for the trial', 'static')
           : '';
-        const outlinedCard = boolean('Outlined card:', true, 'static');
         return {
           alt: 'Image alt text',
           defaultSrc: imgXlg4x3,
@@ -336,7 +321,6 @@ Static.story = {
           tagGroup,
           cta,
           ctaCopy,
-          outlinedCard,
         };
       },
     },
@@ -352,7 +336,6 @@ Static.story = {
           tagGroup: false,
           cta: false,
           ctaCopy: 'Sign up for the trial',
-          outlinedCard: 'true',
         },
       },
     },
@@ -363,7 +346,7 @@ export const Logo = (args) => {
   const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } =
     args?.Card ?? {};
   return html`
-    <c4d-card border logo href=${ifDefined(href || undefined)}>
+    <c4d-card logo href=${ifDefined(href || undefined)}>
       <c4d-image-logo
         slot="image"
         alt="${ifDefined(alt)}"
diff --git a/packages/web-components/src/components/card/card-footer.ts b/packages/web-components/src/components/card/card-footer.ts
index c4be40f9105..667a594ac22 100644
--- a/packages/web-components/src/components/card/card-footer.ts
+++ b/packages/web-components/src/components/card/card-footer.ts
@@ -11,9 +11,7 @@ import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js';
-import C4DLinkWithIcon, {
-  ICON_PLACEMENT,
-} from '../link-with-icon/link-with-icon';
+import C4DLinkWithIcon from '../link-with-icon/link-with-icon';
 import { BASIC_COLOR_SCHEME } from '../../globals/defs';
 import styles from './card.scss';
 
@@ -74,9 +72,7 @@ class C4DCardFooter extends C4DLinkWithIcon {
   }
 
   _renderInner() {
-    return this.iconPlacement === ICON_PLACEMENT.LEFT
-      ? html` ${this._renderIcon()}${this._renderContent()} `
-      : html` ${this._renderContent()}${this._renderIcon()} `;
+    return html` ${this._renderContent()}${this._renderIcon()} `;
   }
 
   /**
@@ -124,21 +120,12 @@ class C4DCardFooter extends C4DLinkWithIcon {
       this.shadowRoot?.querySelector(`a`)?.removeAttribute('aria-label');
     }
 
-    const {
-      iconInline,
-      iconPlacement,
-      _staticNode: staticNode,
-      _linkNode: linkNode,
-    } = this;
+    const { iconInline, _staticNode: staticNode, _linkNode: linkNode } = this;
     const targetNode = linkNode ?? staticNode;
     targetNode!.classList.add(`${prefix}--card__footer`);
     targetNode!.classList.add(`${c4dPrefix}-ce--card__footer`);
-    targetNode!.classList.toggle(
-      `${prefix}--card__footer__icon-left`,
-      iconPlacement === ICON_PLACEMENT.LEFT
-    );
 
-    if (iconInline && iconPlacement === ICON_PLACEMENT.RIGHT) {
+    if (iconInline) {
       targetNode!.classList.add(`${prefix}--link-with-icon--inline-icon`);
     }
   }
diff --git a/packages/web-components/src/components/card/card.scss b/packages/web-components/src/components/card/card.scss
index b040cf77ccb..db3301cc69e 100644
--- a/packages/web-components/src/components/card/card.scss
+++ b/packages/web-components/src/components/card/card.scss
@@ -5,47 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 @use '@carbon/ibmdotcom-styles/scss/components/card';
-@use '@carbon/ibmdotcom-styles/scss/components/link-with-icon';
-
-:host(#{$c4d-prefix}-card-footer),
-:host(#{$c4d-prefix}-card-cta-footer) {
-  align-self: flex-start;
-  max-width: 90%;
-
-  @include breakpoint(md) {
-    max-width: calc(100% - #{$spacing-07});
-  }
-
-  .#{$c4d-prefix}-ce--card__footer--static {
-    color: $link-primary;
-  }
-
-  &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static {
-    color: $link-inverse;
-  }
-
-  &[color-scheme='inverse']
-    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
-    svg,
-    ::slotted(svg[slot='icon']) {
-      color: $link-inverse;
-    }
-  }
-
-  &:hover {
-    ::slotted(svg[slot='icon']),
-    .#{$prefix}--card__cta__copy {
-      color: $link-primary-hover;
-    }
-  }
-}
-
-:host(#{$c4d-prefix}-card-footer[href])::after {
-  position: relative;
-}
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
index 8bc204e4fa5..57d1529dda1 100644
--- a/packages/web-components/src/components/card/card.ts
+++ b/packages/web-components/src/components/card/card.ts
@@ -18,7 +18,6 @@ import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import C4DCardFooter from './card-footer';
 import styles from './card.scss';
 import { PICTOGRAM_PLACEMENT } from './defs';
-// import PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';
 
 import { CTA_TYPE } from '../cta/defs';
 
@@ -111,8 +110,6 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
       noPoster,
     } = this;
 
-    // TODO: SVGs aren't currently working in v2, add this within c4d-image when fixed
-    // PlayVideo({ slot: 'icon' })
     const image =
       hasImage || ctaType !== CTA_TYPE.VIDEO || noPoster
         ? undefined
@@ -190,12 +187,6 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
     `;
   }
 
-  /**
-   * An optional 1px border surrounding the component.
-   */
-  @property({ type: Boolean, reflect: true })
-  border = false;
-
   /**
    * The color scheme.
    * A typical use case of using another color scheme of card is having a "CTA" purpose of card at the last in card group.
@@ -329,7 +320,6 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
       this.videoDuration ? null : (this.videoDuration = formattedVideoDuration);
 
       this.videoTitle = formatVideoCaption({
-        duration: formattedVideoDuration,
         name: videoName,
       });
 
diff --git a/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js b/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js
index 8dc4e1179cb..975fa3cc1ff 100644
--- a/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js
+++ b/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js
@@ -17,7 +17,7 @@ export const hrefsForType = {
   [CTA_TYPE.NEW_TAB]: 'https://www.example.com',
   [CTA_TYPE.DOWNLOAD]:
     'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
+  [CTA_TYPE.VIDEO]: '0_ibuqxqbe',
   [CTA_TYPE.PDF]:
     'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
   [CTA_TYPE.BLOG]: 'https://www.example.com',

From 813474d02f43b3cffa1a7c976a8c4afbc4147a8e Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Tue, 12 Sep 2023 13:14:27 -0700
Subject: [PATCH 3/3] feat(callout): update quote and media with new tokens
 (#10895)

* feat(callout-quote): v2 updates

* fix(callout): token updates

* fix(Callout): add documentation

* fix(callout): broken build

* fix(callout): styles

* fix(callout): format

* fix(themes): add callout tokens cdn

* fix(themes): format

* fix(themes): missing import

* fix(callout): docs

* Update docs/dotcom-v2-migration.md

Co-authored-by: andrew <emyarod@users.noreply.github.com>

* Update docs/dotcom-v2-migration.md

Co-authored-by: andrew <emyarod@users.noreply.github.com>

* Update packages/styles/scss/components/callout-with-media/_callout-with-media.scss

Co-authored-by: andrew <emyarod@users.noreply.github.com>

* fix(callout/hr): comment updates

* fix(format): components

* fix(callout): prefix updates

* fix(callout): cleanup

---------

Co-authored-by: andrew <emyarod@users.noreply.github.com>
---
 docs/dotcom-v2-migration.md                   |  12 ++
 .../callout-quote/_callout-quote.scss         |  98 +++++++---
 .../_callout-with-media.scss                  | 106 ++++++++--
 .../horizontal-rule/_horizontal-rule.scss     | 110 +++--------
 .../styles/scss/components/quote/_quote.scss  |  47 ++++-
 .../scss/internal/callout/_callout.scss       |  74 +++++--
 .../styles/scss/internal/callout/_index.scss  |   1 +
 .../styles/scss/internal/callout/_tokens.scss | 182 ++++++++++++++++++
 .../web-components/.storybook/container.scss  |   4 +
 .../src/component-mixins/callout/callout.ts   |   6 +-
 .../src/component-mixins/callout/defs.ts      |  37 ++++
 .../__stories__/README.stories.mdx            |   9 +
 .../__stories__/README.stories.react.mdx      |   9 +
 .../callout-quote.stories.react.tsx           |  44 +++--
 .../__stories__/callout-quote.stories.ts      |  34 +++-
 .../callout-quote/callout-link-with-icon.ts   |   8 +
 .../callout-quote/callout-quote.scss          |  36 ----
 .../components/callout-quote/callout-quote.ts |  48 ++++-
 .../__stories__/README.stories.mdx            |   9 +
 .../__stories__/README.stories.react.mdx      |   9 +
 .../callout-with-media.stories.react.tsx      |  21 +-
 .../__stories__/callout-with-media.stories.ts |  19 +-
 .../callout-with-media-copy.ts                |  12 +-
 .../callout-with-media-image.ts               |   7 +
 .../callout-with-media-video.ts               |   7 +
 .../callout-with-media/callout-with-media.ts  |  54 ++++++
 .../horizontal-rule.stories.react.tsx         |  13 +-
 .../__stories__/horizontal-rule.stories.ts    |  11 +-
 .../src/components/horizontal-rule/defs.ts    |  13 +-
 .../horizontal-rule/horizontal-rule.scss      |   5 -
 .../horizontal-rule/horizontal-rule.ts        |   4 +-
 .../src/components/quote/quote.scss           |  40 ----
 .../src/components/quote/quote.ts             |   2 +-
 .../src/globals/scss/themes.scss              |  24 +--
 34 files changed, 793 insertions(+), 322 deletions(-)
 create mode 100644 packages/styles/scss/internal/callout/_tokens.scss
 create mode 100644 packages/web-components/src/component-mixins/callout/defs.ts

diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
index 7ca5c698b3c..3957b356883 100644
--- a/docs/dotcom-v2-migration.md
+++ b/docs/dotcom-v2-migration.md
@@ -18,6 +18,7 @@ For Carbon v11 migration guidance, see their
 | back-to-top               | View changes [here](#backtotop)        |
 | background-media          | No API changes.                        |
 | button                    | This component is deprecated in v2 in favor for Carbon's core Button |
+| callout-quote             | View changes [here](#callout-quote)          |
 | card                      | View changes [here] (#card)            |
 | card-group-card-link-item | This component is deprecated in v2 in favor for default card or with content-item |
 | card-link                 | This component is deprecated in v2 in favor for card (link variant) component |
@@ -35,11 +36,13 @@ For Carbon v11 migration guidance, see their
 | cta                       | View changes [here](#cta) |
 | cta-block                 | This component is deprecated in v2 in favor for content-section/block & content-item components |
 | cta-section               | This component is deprecated in v2 in favor for content-section/block & content-item components |
+| hr                        | View changes [here](#horizontal-rule)                      |
 | image                     | View changes [here](#image)            |
 | image-with-caption        | Replaced by `image`                    |
 | link-list-section         | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components |
 | logo-grid                 | This component is deprecated in v2 in favor for content-section/block & image-group components |
 | pictogram-item            | This component is deprecated in v2 in favor for content-item (pictogram variation) componet |
+| quote                     | No API changes.                        |
 | search-with-typeahead     | No API changes.                        |
 | tabs-extended-media       | This component is deprecated in v2 in favor for tabs-extended component |
 
@@ -48,6 +51,11 @@ For Carbon v11 migration guidance, see their
 
 - 
 
+### Callout quote
+
+- New options for `color-scheme` property: `REGULAR = 'regular'`, `INVERSE = 'inverse'` `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'`
+- New callout style tokens
+
 ### Card
 
 - `<dds-card-footer>` has `icon-placement` property has been removed
@@ -62,6 +70,10 @@ All of the CTA-like features can now be used natively within Button, Card, Featu
 Each new component has a `cta-type` property that can change the icon and click functionality of the component. See the components' 
 documentations for more information.
 
+### Horizontal rule
+
+- New options for `contrast` property: `SUBTLE = 'subtle' (default)`, `STRONG = 'strong'` instead of `MEDIUM_CONTRAST = 'medium_contrast'`, `LOW_CONTRAST = 'low_contrast'`, `HIGH_CONTRAST = 'high_contrast'`
+
 ### Image
 
 - New `lightbox-contrast` property
\ No newline at end of file
diff --git a/packages/styles/scss/components/callout-quote/_callout-quote.scss b/packages/styles/scss/components/callout-quote/_callout-quote.scss
index 36e5a410117..707f089f1a4 100644
--- a/packages/styles/scss/components/callout-quote/_callout-quote.scss
+++ b/packages/styles/scss/components/callout-quote/_callout-quote.scss
@@ -11,36 +11,18 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/hang' as *;
-@use '../../internal/callout/callout';
-@use '../quote/quote';
+@use '../../globals/utils/flex-grid' as *;
+@use '../../internal/callout/callout' as *;
+@use '../quote/quote' as *;
 
-@mixin callout-quote {
-  .#{$prefix}--callout-quote,
-  :host(#{$c4d-prefix}-callout-quote) {
-    .#{$prefix}--quote {
-      background-color: $background-inverse;
-      .#{$prefix}--link {
-        color: $link-inverse;
-        outline-color: $focus-inverse;
-        &:hover {
-          color: #a6c8ff;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--callout-quote .#{$prefix}--callout__container {
-    padding-left: $spacing-05;
-    padding-right: $spacing-05;
-
-    @include breakpoint(md) {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
+@include callout;
+@include quote;
 
+@mixin callout-quote {
   :host(#{$c4d-prefix}-callout-quote) {
-    @extend .#{$prefix}--callout__container;
+    @extend :host(#{$c4d-prefix}-callout);
+    @extend :host(#{$c4d-prefix}-callout-text);
+    @include make-row;
 
     @include breakpoint(md) {
       @include hang;
@@ -53,4 +35,66 @@
       outline: transparent;
     }
   }
+
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='inverse']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='layer']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='layer']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='purple']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='purple']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']);
+  }
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='cyan']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']);
+  }
+
+  :host(#{$c4d-prefix}-callout-link-with-icon) {
+    @extend .#{$prefix}--link-with-icon;
+
+    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;
+      }
+
+      &:active {
+        color: $link-primary;
+      }
+    }
+  }
+
+  :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;
+
+      &:hover {
+        // @carbon/styles has no hover color for $link-inverse.
+        color: $link-inverse;
+      }
+
+      &:active {
+        color: $link-inverse;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr {
+    margin: $spacing-05;
+    @include breakpoint(md) {
+      margin: $spacing-05 0;
+    }
+    @include breakpoint(lg) {
+      margin: $spacing-05 $spacing-03;
+    }
+  }
 }
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 c5ff5ce0632..9fd2d3a95e3 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
@@ -11,54 +11,120 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '../../globals/vars' as *;
-@use '../../internal/callout/callout';
+@use '../../internal/callout/callout' as *;
 @use '../../internal/content-block';
 @use '../../internal/content-item/content-item';
 @use '../image';
 @use '../content-block-simple/content-block-simple';
 
+@include callout;
+
 @mixin callout-with-media {
-  :host(#{$c4d-prefix}-callout-with-media),
-  .#{$prefix}--callout-with-media {
+  :host(#{$c4d-prefix}-callout-with-media) {
+    @extend :host(#{$c4d-prefix}-callout);
+
     display: block;
-    background-color: $background-inverse;
 
-    ::slotted([slot='heading']),
-    .#{$prefix}--content-block__heading {
+    ::slotted([slot='heading']) {
       margin-bottom: $spacing-07;
     }
 
     ::slotted([slot='copy']) {
       margin-bottom: $spacing-07;
-      color: $icon-inverse;
     }
   }
 
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='inverse']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='layer']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='purple']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='purple']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='cyan']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']);
+  }
+
   :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='heading']),
-  .#{$prefix}--callout-with-media .#{$prefix}--content-block__heading,
   :host(#{$c4d-prefix}-callout-with-media-copy)
-    ::slotted(#{$c4d-prefix}-content-block-paragraph),
-  .#{$prefix}--callout-with-media .#{$prefix}--content-item__copy p,
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='inverse'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='inverse'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='layer'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='layer'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='purple'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='purple'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='cyan'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='cyan'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @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-video)
-    ::slotted(#{$c4d-prefix}-video-player),
-  .#{$prefix}--callout-with-media .#{$prefix}--video-player__video-caption,
-  .#{$prefix}--callout-with-media .#{$prefix}--image__caption {
-    color: $icon-inverse;
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='inverse'])
+    .#{$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,
+  :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,
+  :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,
+  :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='cyan'])
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']);
   }
 
   :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='heading']),
-  .#{$prefix}--callout-with-media .#{$prefix}--content-block__heading,
-  :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='copy']),
-  .#{$prefix}--callout-with-media .#{$prefix}--callout-with-media-copy {
+  :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='copy']) {
     padding-right: $spacing-07;
     max-width: rem(640px);
     width: auto;
   }
 
-  .#{$prefix}--callout-with-media .#{$prefix}--callout__content {
-    padding-top: 0;
-  }
   :host(#{$c4d-prefix}-callout-with-media-video),
   .#{$prefix}--callout-with-media
     .#{$prefix}--callout__content
diff --git a/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss b/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss
index f29de5639ae..e7b67fc3837 100644
--- a/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss
+++ b/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss
@@ -7,110 +7,58 @@
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '../../globals/vars' as *;
 
 @mixin horizontal-rule {
-  $low-contrast: $layer-accent-01;
-  $medium-contrast: $toggle-off;
-  $high-contrast: $border-inverse;
+  $subtle-contrast: $border-subtle-01;
+  $strong-contrast: $border-strong-01;
   $thin-weight: rem(1px);
 
-  :host(#{$c4d-prefix}-hr)[size='small'] {
-    @extend .#{$prefix}--hr--small;
-  }
-  :host(#{$c4d-prefix}-hr)[size='medium'] {
-    @extend .#{$prefix}--hr--medium;
-  }
-  :host(#{$c4d-prefix}-hr)[size='large'] {
-    @extend .#{$prefix}--hr--large;
-  }
-  :host(#{$c4d-prefix}-hr)[weight='thick'] {
-    @extend .#{$prefix}--hr--thick;
-  }
-  :host(#{$c4d-prefix}-hr)[type='dashed'] {
-    @extend .#{$prefix}--hr--dashed;
-  }
-  :host(#{$c4d-prefix}-hr)[contrast='low-contrast'] {
-    @extend .#{$prefix}--hr--low-contrast;
-  }
-  :host(#{$c4d-prefix}-hr)[contrast='high-contrast'] {
-    @extend .#{$prefix}--hr--high-contrast;
-  }
-
-  :host(#{$c4d-prefix}-hr),
-  .#{$prefix}--hr {
+  :host(#{$c4d-prefix}-hr) {
+    display: block;
     margin: $spacing-05 0;
     border: none;
     height: $thin-weight;
-    background: $medium-contrast;
-
-    &.#{$prefix}--hr--small {
-      max-width: carbon--mini-units(4);
-    }
-
-    &.#{$prefix}--hr--medium {
-      max-width: carbon--mini-units(6);
-    }
-
-    &.#{$prefix}--hr--large {
-      max-width: carbon--mini-units(8);
-    }
-
-    &.#{$prefix}--hr--thick {
-      height: $spacing-01;
-    }
-
-    &.#{$prefix}--hr--low-contrast {
-      background: $low-contrast;
-    }
-
-    &.#{$prefix}--hr--high-contrast {
-      background: $high-contrast;
-    }
+    background: $strong-contrast;
   }
 
-  .#{$prefix}--hr--dashed {
+  :host(
+      #{$c4d-prefix}-hr[type='dashed']:not([size='small']):not(
+          [size='medium']
+        ):not([size='large'])
+    ) {
     height: $thin-weight;
     background-color: transparent;
     background-size: $spacing-05 $thin-weight;
     background-repeat: repeat-x;
     background-image: linear-gradient(
       to right,
-      $medium-contrast 50%,
+      $strong-contrast 50%,
       transparent 50%
     );
+  }
 
-    &.#{$prefix}--hr--low-contrast {
-      background-image: linear-gradient(
-        to right,
-        $low-contrast 50%,
-        transparent 50%
-      );
-    }
-
-    &.#{$prefix}--hr--high-contrast {
-      background-image: linear-gradient(
-        to right,
-        $high-contrast 50%,
-        transparent 50%
-      );
-    }
+  :host(#{$c4d-prefix}-hr[size='small']) {
+    max-width: $spacing-07;
+  }
+  :host(#{$c4d-prefix}-hr[size='medium']) {
+    max-width: $spacing-09;
+  }
+  :host(#{$c4d-prefix}-hr[size='large']) {
+    max-width: $spacing-10;
   }
 
-  .#{$prefix}--hr--small,
-  .#{$prefix}--hr--medium,
-  .#{$prefix}--hr--large {
-    height: $thin-weight;
-    background: $medium-contrast;
-    background-image: none;
+  :host(#{$c4d-prefix}-hr[contrast='subtle']) {
+    background: $subtle-contrast;
+  }
 
-    &.#{$prefix}--hr--low-contrast {
-      background: $low-contrast;
-    }
+  :host(#{$c4d-prefix}-hr[contrast='strong']) {
+    background: $strong-contrast;
+  }
 
-    &.#{$prefix}--hr--high-contrast {
-      background: $high-contrast;
-    }
+  :host(#{$c4d-prefix}-hr[weight='thick']) {
+    height: $spacing-01;
   }
 }
diff --git a/packages/styles/scss/components/quote/_quote.scss b/packages/styles/scss/components/quote/_quote.scss
index 263b641b3ba..e309b9175e2 100644
--- a/packages/styles/scss/components/quote/_quote.scss
+++ b/packages/styles/scss/components/quote/_quote.scss
@@ -17,7 +17,6 @@
 @use '../../components/link-with-icon';
 
 @mixin quote {
-  .#{$prefix}--quote,
   :host(#{$c4d-prefix}-quote) {
     background: $background;
     padding-bottom: $spacing-10;
@@ -45,6 +44,7 @@
 
     word-break: break-word;
     padding: 0 $spacing-07 $spacing-07 $spacing-07;
+    margin: 0;
 
     @include breakpoint(md) {
       padding-bottom: $spacing-09;
@@ -68,7 +68,6 @@
     position: absolute;
     // this value was chosen by visually stay the closest as possible from the quotation text in the md and above breakpoints
     left: 0.6rem;
-    color: $text-primary;
   }
 
   .#{$prefix}--quote__mark-corner-bracket {
@@ -100,20 +99,23 @@
     padding-bottom: $spacing-09;
   }
 
-  :host(#{$c4d-prefix}-quote-source-heading),
-  .#{$prefix}--quote__source-heading {
+  :host(#{$c4d-prefix}-quote-source-bottom-copy),
+  :host(#{$c4d-prefix}-quote-source-copy),
+  :host(#{$c4d-prefix}-quote-source-heading) {
+    display: block;
+  }
+
+  :host(#{$c4d-prefix}-quote-source-heading) {
     padding-left: $spacing-05;
     @include type-style(heading-02, true);
   }
 
-  :host(#{$c4d-prefix}-quote-source-copy),
-  .#{$prefix}--quote__source-body {
+  :host(#{$c4d-prefix}-quote-source-copy) {
     padding-left: $spacing-05;
     @include type-style(body-02, true);
   }
 
-  :host(#{$c4d-prefix}-quote-source-bottom-copy),
-  .#{$prefix}--quote__source-optional-copy {
+  :host(#{$c4d-prefix}-quote-source-bottom-copy) {
     padding-left: $spacing-05;
     @include type-style(body-02, true);
   }
@@ -185,4 +187,33 @@
       @include make-col(10, 12);
     }
   }
+
+  :host(#{$c4d-prefix}-quote) #{$c4d-prefix}-hr {
+    margin: $spacing-05;
+    @include breakpoint(md) {
+      margin: $spacing-05 0;
+    }
+    @include breakpoint(lg) {
+      margin: $spacing-05 $spacing-03;
+    }
+  }
+
+  :host(#{$c4d-prefix}-quote-link-with-icon) {
+    @extend .#{$prefix}--link-with-icon;
+
+    display: inline-block;
+  }
+
+  :host-context(#{$c4d-prefix}-quote[color-scheme='inverse'])
+    a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
+    color: $link-inverse;
+    outline-color: $focus-inverse;
+    &:hover {
+      color: $link-inverse;
+      text-decoration: underline;
+    }
+    &:active {
+      color: $link-inverse;
+    }
+  }
 }
diff --git a/packages/styles/scss/internal/callout/_callout.scss b/packages/styles/scss/internal/callout/_callout.scss
index 8262d703a10..5e38f0ca42f 100644
--- a/packages/styles/scss/internal/callout/_callout.scss
+++ b/packages/styles/scss/internal/callout/_callout.scss
@@ -5,20 +5,73 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use 'sass:map';
+@use '@carbon/colors' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/theme' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/hang' as *;
+@use './tokens' as *;
 
 @mixin callout {
-  .#{$prefix}--callout__container,
   :host(#{$c4d-prefix}-callout) {
-    background-color: $focus-inset;
-    @include make-row;
+    background-color: $background;
   }
+
+  :host(#{$c4d-prefix}-callout[color-scheme='inverse']) {
+    background-color: $background-inverse;
+  }
+
+  :host(#{$c4d-prefix}-callout[color-scheme='layer']) {
+    background-color: $layer-01;
+  }
+
+  :host(#{$c4d-prefix}-callout[color-scheme='purple']) {
+    background-color: $callout-background-purple;
+  }
+
+  :host(#{$c4d-prefix}-callout[color-scheme='cyan']) {
+    background-color: $callout-background-cyan;
+  }
+
+  :host(#{$c4d-prefix}-callout-text),
+  :host(#{$c4d-prefix}-callout-text[color-scheme='layer']) {
+    color: $text-primary;
+  }
+
+  :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']) {
+    color: $text-inverse;
+  }
+
+  :host(#{$c4d-prefix}-callout-text[color-scheme='purple']) {
+    color: $callout-color-purple;
+  }
+
+  :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']) {
+    color: $callout-color-cyan;
+  }
+
+  :host(#{$c4d-prefix}-callout-caption[color-scheme='layer']),
+  :host(#{$c4d-prefix}-callout-caption) {
+    color: $text-secondary;
+  }
+
+  :host(#{$c4d-prefix}-callout-caption[color-scheme='inverse']) {
+    color: $text-inverse;
+  }
+
+  :host(#{$c4d-prefix}-callout-caption[color-scheme='purple']) {
+    color: $callout-caption-purple;
+  }
+
+  :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']) {
+    color: $callout-caption-cyan;
+  }
+
   .#{$prefix}--callout__column {
     @include make-col-ready;
   }
@@ -40,20 +93,5 @@
       @include make-col-offset(1, 12);
       @include make-col(10, 12);
     }
-
-    .#{$prefix}--quote {
-      background-color: $layer-01;
-    }
-
-    .#{$prefix}--quote__copy,
-    .#{$prefix}--quote__source-heading,
-    .#{$prefix}--quote__source-body,
-    .#{$prefix}--quote__source-optional-copy,
-    ::slotted(#{$c4d-prefix}-quote-source-bottom-copy),
-    ::slotted(#{$c4d-prefix}-quote-source-copy),
-    ::slotted(#{$c4d-prefix}-quote-source-heading),
-    .#{$prefix}--quote__mark {
-      color: $icon-inverse;
-    }
   }
 }
diff --git a/packages/styles/scss/internal/callout/_index.scss b/packages/styles/scss/internal/callout/_index.scss
index 436fc32727f..209dc529d53 100644
--- a/packages/styles/scss/internal/callout/_index.scss
+++ b/packages/styles/scss/internal/callout/_index.scss
@@ -6,6 +6,7 @@
 //
 
 @forward 'callout';
+
 @use 'callout';
 
 @include callout.callout;
diff --git a/packages/styles/scss/internal/callout/_tokens.scss b/packages/styles/scss/internal/callout/_tokens.scss
new file mode 100644
index 00000000000..26f93c73994
--- /dev/null
+++ b/packages/styles/scss/internal/callout/_tokens.scss
@@ -0,0 +1,182 @@
+//
+// Copyright IBM Corp. 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/colors' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/component-tokens';
+
+$callout-background-cyan: (
+  fallback: $cyan-10,
+  values: (
+    (
+      theme: themes.$white,
+      value: $cyan-10,
+    ),
+    (
+      theme: themes.$g10,
+      value: $cyan-10,
+    ),
+    (
+      theme: themes.$g90,
+      value: $cyan-90,
+    ),
+    (
+      theme: themes.$g100,
+      value: $cyan-90,
+    ),
+  ),
+);
+
+$callout-color-cyan: (
+  fallback: $cyan-90,
+  values: (
+    (
+      theme: themes.$white,
+      value: $cyan-90,
+    ),
+    (
+      theme: themes.$g10,
+      value: $cyan-90,
+    ),
+    (
+      theme: themes.$g90,
+      value: $cyan-10,
+    ),
+    (
+      theme: themes.$g100,
+      value: $cyan-10,
+    ),
+  ),
+);
+
+$callout-caption-cyan: (
+  fallback: $cyan-70,
+  values: (
+    (
+      theme: themes.$white,
+      value: $cyan-70,
+    ),
+    (
+      theme: themes.$g10,
+      value: $cyan-70,
+    ),
+    (
+      theme: themes.$g90,
+      value: $cyan-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: $cyan-30,
+    ),
+  ),
+);
+
+$callout-background-purple: (
+  fallback: $purple-10,
+  values: (
+    (
+      theme: themes.$white,
+      value: $purple-10,
+    ),
+    (
+      theme: themes.$g10,
+      value: $purple-10,
+    ),
+    (
+      theme: themes.$g90,
+      value: $purple-90,
+    ),
+    (
+      theme: themes.$g100,
+      value: $purple-90,
+    ),
+  ),
+);
+
+$callout-color-purple: (
+  fallback: $purple-90,
+  values: (
+    (
+      theme: themes.$white,
+      value: $purple-90,
+    ),
+    (
+      theme: themes.$g10,
+      value: $purple-90,
+    ),
+    (
+      theme: themes.$g90,
+      value: $purple-10,
+    ),
+    (
+      theme: themes.$g100,
+      value: $purple-10,
+    ),
+  ),
+);
+
+$callout-caption-purple: (
+  fallback: $purple-70,
+  values: (
+    (
+      theme: themes.$white,
+      value: $purple-70,
+    ),
+    (
+      theme: themes.$g10,
+      value: $purple-70,
+    ),
+    (
+      theme: themes.$g90,
+      value: $purple-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: $purple-30,
+    ),
+  ),
+);
+
+$callout-tokens: (
+  callout-background-cyan: $callout-background-cyan,
+  callout-color-cyan: $callout-color-cyan,
+  callout-caption-cyan: $callout-caption-cyan,
+  callout-background-purple: $callout-background-purple,
+  callout-color-purple: $callout-color-purple,
+  callout-caption-purple: $callout-caption-purple,
+);
+
+$callout-background-cyan: component-tokens.get-var(
+  $callout-background-cyan,
+  'callout-background-cyan'
+);
+
+$callout-color-cyan: component-tokens.get-var(
+  $callout-color-cyan,
+  'callout-color-cyan'
+);
+
+$callout-caption-cyan: component-tokens.get-var(
+  $callout-caption-cyan,
+  'callout-caption-cyan'
+);
+
+$callout-background-purple: component-tokens.get-var(
+  $callout-background-purple,
+  'callout-background-purple'
+);
+
+$callout-color-purple: component-tokens.get-var(
+  $callout-color-purple,
+  'callout-color-purple'
+);
+
+$callout-caption-purple: component-tokens.get-var(
+  $callout-caption-purple,
+  'callout-caption-purple'
+);
diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
index e8d1f936969..5a99be42853 100644
--- a/packages/web-components/.storybook/container.scss
+++ b/packages/web-components/.storybook/container.scss
@@ -12,7 +12,11 @@
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/grid';
+
+@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens;
 @use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+
+@include add-component-tokens(callout-tokens.$callout-tokens);
 @include add-component-tokens(tag-tokens.$tag-tokens);
 
 // Emit the flex-grid styles
diff --git a/packages/web-components/src/component-mixins/callout/callout.ts b/packages/web-components/src/component-mixins/callout/callout.ts
index 0fc70f93ce6..5d29235f5b5 100644
--- a/packages/web-components/src/component-mixins/callout/callout.ts
+++ b/packages/web-components/src/component-mixins/callout/callout.ts
@@ -18,7 +18,7 @@ const { prefix } = settings;
  * @mixin c4d-callout
  */
 const C4DCalloutMixin = <T extends Constructor<HTMLElement>>(base: T) => {
-  return class extends base {
+  abstract class CalloutMixin extends base {
     render() {
       return html`
         <div class="${prefix}--callout__column">
@@ -32,7 +32,9 @@ const C4DCalloutMixin = <T extends Constructor<HTMLElement>>(base: T) => {
         </div>
       `;
     }
-  };
+  }
+
+  return CalloutMixin;
 };
 
 export default C4DCalloutMixin;
diff --git a/packages/web-components/src/component-mixins/callout/defs.ts b/packages/web-components/src/component-mixins/callout/defs.ts
new file mode 100644
index 00000000000..a4591e15c8f
--- /dev/null
+++ b/packages/web-components/src/component-mixins/callout/defs.ts
@@ -0,0 +1,37 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export enum COLOR_SCHEME {
+  /**
+   * Regular
+   */
+  REGULAR = 'regular',
+
+  /**
+   * Inverse
+   */
+  INVERSE = 'inverse',
+
+  /**
+   * Layer background
+   */
+  LAYER = 'layer',
+
+  /**
+   * Cyan background
+   */
+  CYAN = 'cyan',
+
+  /**
+   * Purple background
+   */
+  PURPLE = 'purple',
+}
+
+export default COLOR_SCHEME;
diff --git a/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx b/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx
index e3efc2baf82..5933ea447ef 100644
--- a/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx
@@ -29,6 +29,15 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-quote/index.js';
 
 <Description markdown={`${cdnCss()}`} />
 
+### SCSS
+
+Callout quote has specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following:
+
+```css
+@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens;
+@include add-component-tokens(callout-tokens.$callout-tokens);
+```
+
 ### HTML
 
 ```html
diff --git a/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx b/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx
index c34456e9ced..de1db401951 100644
--- a/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx
@@ -44,6 +44,15 @@ function App() {
 }
 ```
 
+### SCSS
+
+Callout quote has specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following:
+
+```css
+@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens;
+@include add-component-tokens(callout-tokens.$callout-tokens);
+```
+
 ## Props
 
 <Props of={PropTypesRef} />
diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx
index e58f00387de..2edb5fe9034 100644
--- a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx
+++ b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx
@@ -19,9 +19,10 @@ import C4DQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-r
 import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import { QUOTE_TYPES } from '../../quote/quote';
+import { COLOR_SCHEME } from '../../../component-mixins/callout/defs';
 import readme from './README.stories.react.mdx';
 
-const types = {
+const quoteTypes = {
   [`${QUOTE_TYPES.DEFAULT}`]: QUOTE_TYPES.DEFAULT,
   [`${QUOTE_TYPES.SINGLE_CURVED}`]: QUOTE_TYPES.SINGLE_CURVED,
   [`${QUOTE_TYPES.DOUBLE_ANGLE}`]: QUOTE_TYPES.DOUBLE_ANGLE,
@@ -31,11 +32,19 @@ const types = {
   [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET,
 };
 
-export const Default = (args) => {
-  const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy } =
-    args?.CalloutQuote ?? {};
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
+};
+
+
+export const Default = args => {
+  const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy, colorScheme } = args?.CalloutQuote ?? {};
   return (
-    <C4DCalloutQuote mark-type={quoteMark}>
+    <C4DCalloutQuote mark-type={quoteMark} color-scheme={colorScheme}>
       {copy}
       <C4DQuoteSourceHeading>{sourceHeading}</C4DQuoteSourceHeading>
       <C4DQuoteSourceCopy>{sourceCopy}</C4DQuoteSourceCopy>
@@ -51,22 +60,15 @@ Default.story = {
   parameters: {
     knobs: {
       CalloutQuote: () => ({
-        copy: textNullable(
-          'Quote (copy):',
-          'Bringing together the technology and expertise for a new way to create'
-        ),
-        quoteMark: select('Quote Mark (markType):', types, types.doubleCurved),
-        sourceHeading: textNullable(
-          'Source heading (source-heading slot)',
-          'John Doe'
-        ),
-        sourceCopy: textNullable(
-          'Source copy (source-copy slot)',
-          'Senior Vice President'
-        ),
-        sourceBottomCopy: textNullable(
-          'Source bottom copy (source-bottom-copy slot)',
-          'IBM Cloud'
+        copy: textNullable('Quote (copy):', 'Bringing together the technology and expertise for a new way to create'),
+        quoteMark: select('Quote Mark (markType):', quoteTypes, quoteTypes.doubleCurved),
+        sourceHeading: textNullable('Source heading (source-heading slot)', 'John Doe'),
+        sourceCopy: textNullable('Source copy (source-copy slot)', 'Senior Vice President'),
+        sourceBottomCopy: textNullable('Source bottom copy (source-bottom-copy slot)', 'IBM Cloud'),
+        colorScheme: select(
+          'Color scheme:',
+          colorSchemeTypes,
+          COLOR_SCHEME.REGULAR
         ),
       }),
     },
diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts
index d50547d654d..6f1a84399de 100644
--- a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts
+++ b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts
@@ -13,10 +13,11 @@ import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/
 import { html } from 'lit';
 import { select } from '@storybook/addon-knobs';
 import { QUOTE_TYPES } from '../../quote/quote';
+import { COLOR_SCHEME } from '../../../component-mixins/callout/defs';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
-const types = {
+const quoteTypes = {
   [`${QUOTE_TYPES.DEFAULT}`]: QUOTE_TYPES.DEFAULT,
   [`${QUOTE_TYPES.SINGLE_CURVED}`]: QUOTE_TYPES.SINGLE_CURVED,
   [`${QUOTE_TYPES.DOUBLE_ANGLE}`]: QUOTE_TYPES.DOUBLE_ANGLE,
@@ -26,11 +27,25 @@ const types = {
   [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET,
 };
 
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
+};
+
 export const Default = (args) => {
-  const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy } =
-    args?.CalloutQuote ?? {};
+  const {
+    copy,
+    quoteMark,
+    sourceHeading,
+    sourceCopy,
+    sourceBottomCopy,
+    colorScheme,
+  } = args?.CalloutQuote ?? {};
   return html`
-    <c4d-callout-quote mark-type="${quoteMark}">
+    <c4d-callout-quote mark-type="${quoteMark}" color-scheme="${colorScheme}">
       ${copy}
       <c4d-quote-source-heading> ${sourceHeading} </c4d-quote-source-heading>
       <c4d-quote-source-copy> ${sourceCopy} </c4d-quote-source-copy>
@@ -65,7 +80,11 @@ export default {
           'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ' +
             'ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.'
         ),
-        quoteMark: select('Quote Mark (markType):', types, types.doubleCurved),
+        quoteMark: select(
+          'Quote Mark (markType):',
+          quoteTypes,
+          quoteTypes.doubleCurved
+        ),
         sourceHeading: textNullable(
           'Source heading (source-heading slot)',
           'Lorem ipsum dolor sit amet'
@@ -78,6 +97,11 @@ export default {
           'Source bottom copy (source-bottom-copy slot)',
           'IBM Cloud'
         ),
+        colorScheme: select(
+          'Color scheme:',
+          colorSchemeTypes,
+          COLOR_SCHEME.REGULAR
+        ),
       }),
     },
     propsSet: {
diff --git a/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts b/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts
index c2a70265a30..fc472b13113 100644
--- a/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts
+++ b/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts
@@ -11,6 +11,8 @@ import { css } from 'lit';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import C4DLinkWithIcon from '../link-with-icon/link-with-icon';
+import { property } from 'lit/decorators.js';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
 import styles from './callout-quote.scss';
 
 const { stablePrefix: c4dPrefix } = settings;
@@ -22,6 +24,12 @@ const { stablePrefix: c4dPrefix } = settings;
  */
 @customElement(`${c4dPrefix}-callout-link-with-icon`)
 class C4DCalloutLinkWithIcon extends C4DLinkWithIcon {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
   static get stableSelector() {
     return `${c4dPrefix}--callout-link-with-icon`;
   }
diff --git a/packages/web-components/src/components/callout-quote/callout-quote.scss b/packages/web-components/src/components/callout-quote/callout-quote.scss
index 2a7f3cf6fc4..1c2d6f41dd0 100644
--- a/packages/web-components/src/components/callout-quote/callout-quote.scss
+++ b/packages/web-components/src/components/callout-quote/callout-quote.scss
@@ -5,41 +5,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 @use '@carbon/ibmdotcom-styles/scss/components/callout-quote';
 @use '@carbon/ibmdotcom-styles/scss/components/link-with-icon';
-
-:host(#{$c4d-prefix}-callout-link-with-icon) {
-  @extend .#{$prefix}--link-with-icon;
-
-  display: inline-block;
-  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 $inverse-link.
-      // Solution is to use the same token and add underline
-      color: $link-inverse;
-      text-decoration: underline;
-    }
-
-    &:active {
-      color: $link-inverse;
-    }
-  }
-}
-
-:host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr {
-  margin: $spacing-05;
-  @include breakpoint(md) {
-    margin: $spacing-05 0;
-  }
-  @include breakpoint(lg) {
-    margin: $spacing-05 $spacing-03;
-  }
-}
diff --git a/packages/web-components/src/components/callout-quote/callout-quote.ts b/packages/web-components/src/components/callout-quote/callout-quote.ts
index a7a41dd43c6..a745e59239a 100644
--- a/packages/web-components/src/components/callout-quote/callout-quote.ts
+++ b/packages/web-components/src/components/callout-quote/callout-quote.ts
@@ -7,21 +7,63 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { html } from 'lit';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './callout-quote.scss';
 import C4DCalloutMixin from '../../component-mixins/callout/callout';
 import C4DQuote from '../quote/quote';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+import { property } from 'lit/decorators.js';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
+import C4DCalloutLinkWithIcon from './callout-link-with-icon';
 
-const { stablePrefix: c4dPrefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
- * Callout Data.
+ * Callout Quote.
  *
- * @element c4d-callout-data
+ * @element c4d-callout-quote
  */
 @customElement(`${c4dPrefix}-callout-quote`)
 class C4DCalloutQuote extends C4DCalloutMixin(C4DQuote) {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const linkWithIcon = this.querySelector(
+      (this.constructor as typeof C4DCalloutQuote).selectorLinkWithIcon
+    );
+    linkWithIcon
+      ? ((linkWithIcon as C4DCalloutLinkWithIcon).colorScheme =
+          this.colorScheme)
+      : '';
+  }
+
+  render() {
+    return html`
+      <div class="${prefix}--callout__column">
+        <div class="${prefix}--callout__content">
+          <div class="${prefix}--quote__container">
+            <div class="${prefix}--quote__wrapper">
+              ${this._renderQuote()}${this._renderSource()}${this._renderFooter()}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * A selector that will return the child link-with-icon.
+   */
+  static get selectorLinkWithIcon() {
+    return `${c4dPrefix}-callout-link-with-icon`;
+  }
+
   static get stableSelector() {
     return `${c4dPrefix}--callout-quote`;
   }
diff --git a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx
index 1cff978cc6c..bf239911384 100644
--- a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx
@@ -41,6 +41,15 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/callou
 
 <Description markdown={`${cdnCss()}`} />
 
+### SCSS
+
+Callout quote has specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following:
+
+```css
+@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens;
+@include add-component-tokens(callout-tokens.$callout-tokens);
+```
+
 ### HTML
 
 ```html
diff --git a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx
index 7f0d2ca7781..089de3b6ecf 100644
--- a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx
@@ -46,6 +46,15 @@ function App() {
 }
 ```
 
+### SCSS
+
+Callout quote has specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following:
+
+```css
+@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens;
+@include add-component-tokens(callout-tokens.$callout-tokens);
+```
+
 ## Callout with Media (Video)
 
 ```javascript
diff --git a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx
index 4c5c4cbf6a1..dc08c622ecc 100644
--- a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx
+++ b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx
@@ -19,10 +19,20 @@ import C4DCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/compone
 import C4DCalloutWithMediaImage from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-image';
 import C4DCalloutWithMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-video';
 import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy';
+import { COLOR_SCHEME } from '../../../component-mixins/callout/defs';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
 import readme from './README.stories.react.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
+};
+
+
 const image = (
   <C4DCalloutWithMediaImage
     alt="Image alt text"
@@ -35,15 +45,15 @@ const video = (
 );
 
 export const Default = (args) => {
-  const { copy, heading, mediaType } = args?.CalloutWithMedia ?? {};
-  const headingComponent = document.querySelector('cds-content-block-heading');
+  const { copy, heading, mediaType, colorScheme } = args?.CalloutWithMedia ?? {};
+  const headingComponent = document.querySelector('c4d-content-block-heading');
 
   if (headingComponent) {
     headingComponent.shadowRoot!.textContent = heading;
   }
 
   return (
-    <C4DCalloutWithMedia>
+    <C4DCalloutWithMedia color-scheme={colorScheme}>
       <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
       <C4DCalloutWithMediaCopy size={CONTENT_BLOCK_COPY_SIZE.SMALL}>
         {copy}
@@ -82,6 +92,11 @@ export default {
           Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
           nulla quis, *consequat* libero. Here are
           some common categories:`,
+          colorScheme: select(
+            'Color scheme:',
+            colorSchemeTypes,
+            COLOR_SCHEME.REGULAR
+          ),
       }),
     },
   },
diff --git a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts
index 06dc9acc151..4b976044e71 100644
--- a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts
+++ b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts
@@ -13,10 +13,19 @@ import '../callout-with-media-video';
 import { html } from 'lit';
 import { select } from '@storybook/addon-knobs';
 import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy';
+import { COLOR_SCHEME } from '../../../component-mixins/callout/defs';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
+};
+
 const image = html`
   <c4d-callout-with-media-image
     alt="Image alt text"
@@ -31,9 +40,10 @@ const video = html`
 `;
 
 export const Default = (args) => {
-  const { copy, heading, mediaType } = args?.CalloutWithMedia ?? {};
+  const { copy, heading, mediaType, colorScheme } =
+    args?.CalloutWithMedia ?? {};
   return html`
-    <c4d-callout-with-media>
+    <c4d-callout-with-media color-scheme="${colorScheme}">
       <c4d-content-block-heading>${heading}</c4d-content-block-heading>
       <c4d-callout-with-media-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
         >${copy}</c4d-callout-with-media-copy
@@ -73,6 +83,11 @@ export default {
   Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
   nulla quis, *consequat* libero. Here are
   some common categories:`,
+        colorScheme: select(
+          'Color scheme:',
+          colorSchemeTypes,
+          COLOR_SCHEME.REGULAR
+        ),
       }),
     },
     propsSet: {
diff --git a/packages/web-components/src/components/callout-with-media/callout-with-media-copy.ts b/packages/web-components/src/components/callout-with-media/callout-with-media-copy.ts
index 494d3fb20a1..66992410252 100644
--- a/packages/web-components/src/components/callout-with-media/callout-with-media-copy.ts
+++ b/packages/web-components/src/components/callout-with-media/callout-with-media-copy.ts
@@ -7,9 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { css } from 'lit';
+import { property } from 'lit/decorators.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import C4DContentBlockCopy from '../content-block/content-block-copy';
+import DDSContentBlockCopy from '../content-block/content-block-copy';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
 import styles from './callout-with-media.scss';
 
 const { stablePrefix: c4dPrefix } = settings;
@@ -20,7 +22,13 @@ const { stablePrefix: c4dPrefix } = settings;
  * @element c4d-callout-with-media-copy
  */
 @customElement(`${c4dPrefix}-callout-with-media-copy`)
-class C4DCalloutWithMediaCopy extends C4DContentBlockCopy {
+class C4DCalloutWithMediaCopy extends DDSContentBlockCopy {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
   static get stableSelector() {
     return `${c4dPrefix}--callout-with-media-copy`;
   }
diff --git a/packages/web-components/src/components/callout-with-media/callout-with-media-image.ts b/packages/web-components/src/components/callout-with-media/callout-with-media-image.ts
index 8454f9e8e14..59ccd3579ab 100644
--- a/packages/web-components/src/components/callout-with-media/callout-with-media-image.ts
+++ b/packages/web-components/src/components/callout-with-media/callout-with-media-image.ts
@@ -11,6 +11,7 @@ import { property } from 'lit/decorators.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './callout-with-media.scss';
 import C4DImage from '../image/image';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
 const { stablePrefix: c4dPrefix } = settings;
@@ -22,6 +23,12 @@ const { stablePrefix: c4dPrefix } = settings;
  */
 @customElement(`${c4dPrefix}-callout-with-media-image`)
 class C4DCalloutWithMediaImage extends C4DImage {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
   /**
    * The shadow slot this video container should be in.
    */
diff --git a/packages/web-components/src/components/callout-with-media/callout-with-media-video.ts b/packages/web-components/src/components/callout-with-media/callout-with-media-video.ts
index 63b955f527d..6463fbd9a17 100644
--- a/packages/web-components/src/components/callout-with-media/callout-with-media-video.ts
+++ b/packages/web-components/src/components/callout-with-media/callout-with-media-video.ts
@@ -11,6 +11,7 @@ import { property } from 'lit/decorators.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './callout-with-media.scss';
 import C4DVideoPlayerContainer from '../video-player/video-player-container';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
 const { stablePrefix: c4dPrefix } = settings;
@@ -22,6 +23,12 @@ const { stablePrefix: c4dPrefix } = settings;
  */
 @customElement(`${c4dPrefix}-callout-with-media-video`)
 class C4DCalloutWithMediaVideo extends C4DVideoPlayerContainer {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
   /**
    * The shadow slot this video container should be in.
    */
diff --git a/packages/web-components/src/components/callout-with-media/callout-with-media.ts b/packages/web-components/src/components/callout-with-media/callout-with-media.ts
index 94a17a9504a..11430709d59 100644
--- a/packages/web-components/src/components/callout-with-media/callout-with-media.ts
+++ b/packages/web-components/src/components/callout-with-media/callout-with-media.ts
@@ -13,6 +13,11 @@ import C4DCalloutMixin from '../../component-mixins/callout/callout';
 import C4DContentBlock from '../content-block/content-block';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+import { property } from 'lit/decorators.js';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
+import C4DCalloutWithMediaCopy from './callout-with-media-copy';
+import C4DCalloutWithMediaImage from './callout-with-media-image';
+import C4DCalloutWithMediaVideo from './callout-with-media-video';
 
 const { stablePrefix: c4dPrefix } = settings;
 
@@ -25,6 +30,55 @@ const { stablePrefix: c4dPrefix } = settings;
 class C4DCalloutWithMedia extends C4DCalloutMixin(
   StableSelectorMixin(C4DContentBlock)
 ) {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const copy = this.querySelector(
+      (this.constructor as typeof C4DCalloutWithMedia).selectorCopy
+    );
+    const image = this.querySelector(
+      (this.constructor as typeof C4DCalloutWithMedia).selectorImage
+    );
+    const video = this.querySelector(
+      (this.constructor as typeof C4DCalloutWithMedia).selectorVideo
+    );
+    copy
+      ? ((copy as C4DCalloutWithMediaCopy).colorScheme = this.colorScheme)
+      : '';
+    image
+      ? ((image as C4DCalloutWithMediaImage).colorScheme = this.colorScheme)
+      : '';
+    video
+      ? ((video as C4DCalloutWithMediaVideo).colorScheme = this.colorScheme)
+      : '';
+  }
+
+  /**
+   * A selector that will return the child image.
+   */
+  static get selectorImage() {
+    return `${c4dPrefix}-callout-with-media-image`;
+  }
+
+  /**
+   * A selector that will return the child video.
+   */
+  static get selectorVideo() {
+    return `${c4dPrefix}-callout-with-media-video`;
+  }
+
+  /**
+   * A selector that will return the child copy.
+   */
+  static get selectorCopy() {
+    return `${c4dPrefix}-callout-with-media-copy`;
+  }
+
   static get stableSelector() {
     return `${c4dPrefix}--callout-with-media`;
   }
diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.react.tsx b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.react.tsx
index 316c80d583e..c983ba01e78 100644
--- a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.react.tsx
+++ b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.react.tsx
@@ -28,9 +28,8 @@ const sizes = {
 };
 
 const contrasts = {
-  'low-contrast': 'low-contrast',
-  'medium-contrast': undefined,
-  'high-contrast': 'high-contrast',
+  'strong': 'strong',
+  'subtle': 'subtle',
 };
 
 const weights = {
@@ -55,11 +54,7 @@ Default.story = {
       HorizontalRule: () => ({
         type: select('Type (type):', types, types.solid),
         size: select('Size (size):', sizes, sizes.fluid),
-        contrast: select(
-          'Contrast (contrast):',
-          contrasts,
-          contrasts['medium-contrast']
-        ),
+        contrast: select('Contrast (contrast):', contrasts, contrasts['strong']),
         weight: select('Weight (weight):', weights, weights.thin),
       }),
     },
@@ -68,7 +63,7 @@ Default.story = {
         HorizontalRule: {
           type: types.solid,
           size: sizes.fluid,
-          contrast: contrasts['medium-contrast'],
+          contrast: contrasts['strong'],
           weight: weights.thin,
         },
       },
diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts
index b23c351f594..26ed2a88a0f 100644
--- a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts
+++ b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts
@@ -38,9 +38,8 @@ const sizes = {
 };
 
 const contrasts = {
-  'low-contrast': 'low-contrast',
-  'medium-contrast': undefined,
-  'high-contrast': 'high-contrast',
+  strong: 'strong',
+  subtle: 'subtle',
 };
 
 const weights = {
@@ -52,7 +51,7 @@ export default {
   title: 'Components/Horizontal rule',
   decorators: [
     (story) => html`
-      <div class="cds--grid cds--grid--condensed">
+      <div class="cds--grid">
         <div class="cds--row">
           <div class="cds--col-lg-12">
             <h2>Horizontal Rule</h2>
@@ -72,7 +71,7 @@ export default {
         contrast: select(
           'Contrast (contrast):',
           contrasts,
-          contrasts['medium-contrast']
+          contrasts['strong']
         ),
         weight: select('Weight (weight):', weights, weights.thin),
       }),
@@ -82,7 +81,7 @@ export default {
         HorizontalRule: {
           type: types.solid,
           size: sizes.fluid,
-          contrast: contrasts['medium-contrast'],
+          contrast: contrasts['strong'],
           weight: weights.thin,
         },
       },
diff --git a/packages/web-components/src/components/horizontal-rule/defs.ts b/packages/web-components/src/components/horizontal-rule/defs.ts
index 2ce2b9d3455..ee197f989cd 100644
--- a/packages/web-components/src/components/horizontal-rule/defs.ts
+++ b/packages/web-components/src/components/horizontal-rule/defs.ts
@@ -52,19 +52,14 @@ export enum HR_SIZE {
  */
 export enum HR_CONTRAST {
   /**
-   * medium-contrast of hr
+   * subtle contrast of hr
    */
-  MEDIUM_CONTRAST = 'medium-contrast',
+  SUBTLE = 'subtle',
 
   /**
-   * low-contrast of hr
+   * strong default contrast of hr
    */
-  LOW_CONTRAST = 'low-contrast',
-
-  /**
-   * high-contrast of hr
-   */
-  HIGH_CONTRAST = 'high-contrast',
+  STRONG = 'strong',
 }
 
 /**
diff --git a/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss b/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss
index c135bca870d..e36fdd3ccb2 100644
--- a/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss
+++ b/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss
@@ -5,9 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 @use '@carbon/ibmdotcom-styles/scss/components/horizontal-rule';
-
-:host(#{$c4d-prefix}-hr) {
-  display: block;
-}
diff --git a/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts b/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts
index 809ada80aa6..9d3092072e5 100644
--- a/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts
+++ b/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts
@@ -41,10 +41,10 @@ class C4DHorizontalRule extends StableSelectorMixin(LitElement) {
 
   /**
    * Contrast of the HR
-   * (medium-contrast (default) | low-contrast | high-contrast)
+   * 'strong' (default) | subtle)
    */
   @property({ attribute: 'contrast', reflect: true })
-  contrast = HR_CONTRAST.MEDIUM_CONTRAST;
+  contrast = HR_CONTRAST.STRONG;
 
   /**
    * Weight of the HR
diff --git a/packages/web-components/src/components/quote/quote.scss b/packages/web-components/src/components/quote/quote.scss
index 0e1023ab189..6dc18fc078f 100644
--- a/packages/web-components/src/components/quote/quote.scss
+++ b/packages/web-components/src/components/quote/quote.scss
@@ -5,45 +5,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/ibmdotcom-styles/scss/components/quote';
 @use '@carbon/ibmdotcom-styles/scss/components/link-with-icon';
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
-
-:host(#{$c4d-prefix}-quote-source-bottom-copy),
-:host(#{$c4d-prefix}-quote-source-copy),
-:host(#{$c4d-prefix}-quote-source-heading) {
-  display: block;
-}
-
-:host(#{$c4d-prefix}-quote) #{$c4d-prefix}-hr {
-  margin: $spacing-05;
-  @include breakpoint(md) {
-    margin: $spacing-05 0;
-  }
-  @include breakpoint(lg) {
-    margin: $spacing-05 $spacing-03;
-  }
-}
-
-:host(#{$c4d-prefix}-quote-link-with-icon) {
-  @extend .#{$prefix}--link-with-icon;
-
-  display: inline-block;
-}
-
-:host-context(#{$c4d-prefix}-quote[color-scheme='inverse'])
-  a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
-  color: $link-inverse;
-  outline-color: $focus-inverse;
-  &:hover {
-    color: $link-inverse;
-    text-decoration: underline;
-  }
-  &:active {
-    color: $link-inverse;
-  }
-}
diff --git a/packages/web-components/src/components/quote/quote.ts b/packages/web-components/src/components/quote/quote.ts
index 1c8920da240..f8683a5d36c 100644
--- a/packages/web-components/src/components/quote/quote.ts
+++ b/packages/web-components/src/components/quote/quote.ts
@@ -55,7 +55,7 @@ class C4DQuote extends StableSelectorMixin(LitElement) {
    * Defines if the inverse class is included
    */
   @property({ reflect: true, attribute: 'color-scheme' })
-  colorScheme = QUOTE_COLOR_SCHEMES.REGULAR;
+  colorScheme = '';
 
   /**
    * `true` if there is source heading.
diff --git a/packages/web-components/src/globals/scss/themes.scss b/packages/web-components/src/globals/scss/themes.scss
index 3b834c12758..32e97bd02ff 100644
--- a/packages/web-components/src/globals/scss/themes.scss
+++ b/packages/web-components/src/globals/scss/themes.scss
@@ -4,27 +4,7 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/themes' as *;
-
-:host(.#{$c4d-prefix}-theme-zone-white),
-.#{$c4d-prefix}-theme-zone-white {
-  @include theme($white, true);
-}
-
-:host(.#{$c4d-prefix}-theme-zone-g10),
-.#{$c4d-prefix}-theme-zone-g10 {
-  @include theme($g10, true);
-}
-
-:host(.#{$c4d-prefix}-theme-zone-g90),
-.#{$c4d-prefix}-theme-zone-g90 {
-  @include theme($g90, true);
-}
+@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens;
 
-:host(.#{$c4d-prefix}-theme-zone-g100),
-.#{$c4d-prefix}-theme-zone-g100 {
-  @include theme($g100, true);
-}
+@include add-component-tokens(callout-tokens.$callout-tokens);