feat(ibmdotcom-styles) remove react classes from component styles

packages/styles/scss/components/card/_card.scss

@@ -51,9 +51,7 @@
       }
 
       ::slotted(#{$c4d-prefix}-image),
-      ::slotted(#{$c4d-prefix}-card-cta-image),
-      .#{$prefix}--card__img,
-      .#{$prefix}--image {
+      ::slotted(#{$c4d-prefix}-card-cta-image) {
         z-index: -1;
       }
     }
@@ -65,8 +63,7 @@
       z-index: 2;
       text-decoration: none;
 
-      ::slotted(#{$c4d-prefix}-image),
-      .#{$prefix}--image {
+      ::slotted(#{$c4d-prefix}-image) {
         z-index: -1;
       }
     }
@@ -133,13 +130,6 @@
       inline-size: 100%;
     }
 
-    .#{$prefix}--card__heading {
-      @include type-style('fluid-heading-03', true);
-
-      margin-block-end: $spacing-10;
-    }
-
-    .#{$prefix}--card__heading,
     .#{$prefix}--card__copy {
       @include content-width;
 
@@ -152,10 +142,6 @@
       margin-block-end: $spacing-07;
     }
 
-    .#{$prefix}--card__img {
-      transition: $duration-moderate-01 motion(standard, productive);
-    }
-
     .#{$prefix}--card__link::after {
       position: absolute;
       content: '';
@@ -291,19 +277,6 @@
   :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;
-  }
-
-  .#{$prefix}--card--border {
-    border: 1px solid $layer-accent-01;
-  }
-
-  // FIXME: CardLink is being used as Card in React, need to separate this
-  .#{$prefix}--card__CTA.#{$prefix}--card__CardCTA .#{$prefix}--card__heading {
-    @include type-style('fluid-heading-03', true);
-  }
-
   // static card
 
   :host(#{$c4d-prefix}-card),
@@ -415,8 +388,7 @@
     outline: none;
   }
 
-  :host(#{$c4d-prefix}-card-eyebrow),
-  .#{$prefix}--card__eyebrow {
+  :host(#{$c4d-prefix}-card-eyebrow) {
     @include content-width;
     @include type-style('label-02');
 
@@ -485,11 +457,6 @@
       @include type-style('body-02');
     }
 
-    .#{$prefix}--card__footer__copy {
-      margin-block-end: -$spacing-01;
-      max-inline-size: calc(100% - 20px);
-    }
-
     svg,
     ::slotted(svg[slot='icon']) {
       display: block;
@@ -572,15 +539,10 @@
       background-color: $background-inverse-hover;
     }
 
-    .#{$prefix}--card__heading,
     .#{$prefix}--card__copy {
       color: $icon-inverse;
     }
 
-    .#{$prefix}--card__eyebrow {
-      color: $text-placeholder;
-    }
-
     &:focus-within {
       &::after {
         position: absolute;
@@ -655,13 +617,6 @@
     .#{$prefix}--card {
       border: 1px solid $layer-accent-01;
       background-color: $layer-02;
-
-      .#{$prefix}--card__img,
-      .#{$prefix}--card__image_img,
-      .#{$prefix}--image,
-      .#{$prefix}--card__video-thumbnail {
-        display: none;
-      }
     }
   }
 

packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss

@@ -25,16 +25,6 @@
     }
   }
 
-  .#{$prefix}--content-block-horizontal {
-    .#{$prefix}--content-block {
-      padding-block: $spacing-07 $spacing-05;
-
-      @include breakpoint(lg) {
-        padding-block: $spacing-10 $spacing-09;
-      }
-    }
-  }
-
   :host(#{$c4d-prefix}-content-block-horizontal) ::slotted([slot='heading']),
   .#{$prefix}--content-block-horizontal .#{$prefix}--content-block__heading {
     margin-block-end: $spacing-07;

packages/styles/scss/components/content-block-media/_content-block-media.scss

@@ -18,32 +18,13 @@
 @use '../feature-card';
 
 @mixin themed-items {
-  background: $background;
   color: $text-primary;
-
-  &.#{$prefix}--content-block-media--with-border
-    .#{$prefix}--content-block-media__divider {
-    border-block-end-color: $toggle-off;
-  }
+  background: $background;
 }
 
 @mixin content-block-media {
   .#{$prefix}--content-block-media,
   :host(#{$c4d-prefix}-content-block-media) {
     @include themed-items;
-
-    .#{$prefix}--content-group:last-child {
-      margin-block-end: 0;
-    }
-
-    .#{$prefix}--feature-card {
-      max-inline-size: to-rem(640px);
-    }
-  }
-
-  .#{$prefix}--content-block-media--g100 {
-    @include theme($g100, true);
-
-    @include themed-items;
   }
 }

packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss

@@ -26,20 +26,5 @@
         max-inline-size: calc(100% + $spacing-05);
       }
     }
-
-    .#{$prefix}--layout-1-3 {
-      @include breakpoint-down(md) {
-        .#{$prefix}--link-list__list.#{$prefix}--link-list__list--card {
-          margin-inline-end: -$spacing-05;
-        }
-      }
-      @include breakpoint(lg) {
-        @include make-col-offset(1, 12);
-      }
-    }
-
-    .#{$prefix}--content-block__cta-col {
-      max-inline-size: carbon--mini-units(40);
-    }
   }
 }

packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss

@@ -22,66 +22,10 @@
         @include breakpoint(lg) {
           padding-block-end: $spacing-13;
         }
-
-        .#{$prefix}--content-block__cta-row {
-          margin-block-end: 0;
-        }
-
-        .#{$prefix}--layout-2-3 {
-          padding-inline-start: 0;
-        }
-      }
-    }
-
-    .#{$prefix}--content-group__cta-row {
-      @include breakpoint-down(md) {
-        margin-inline-start: 0;
-      }
-    }
-
-    .#{$prefix}--content-block__cta-row {
-      margin-block-end: $spacing-07;
-      @include breakpoint(lg) {
-        margin-block-end: $spacing-13;
-      }
-    }
-  }
-
-  // React specific classes to manage bottom spacing
-  .#{$prefix}--content-block-segmented {
-    &-border {
-      .#{$prefix}--content-block {
-        padding-block-end: 0;
-      }
-    }
-
-    .#{$prefix}--content-block__cta-row {
-      margin-block-end: 0;
-
-      &-border {
-        margin-block-end: $spacing-07;
-        @include breakpoint(lg) {
-          margin-block-end: $spacing-13;
-        }
       }
     }
   }
 
-  :host(#{$c4d-prefix}-content-block-segmented)
-    .#{$prefix}--content-block__children
-    .#{$prefix}--content-block-segmented__media
-    ::slotted(:not([slot])) {
-    display: block;
-    margin-block: $spacing-10;
-  }
-
-  :host(#{$c4d-prefix}-content-block-segmented)
-    .#{$prefix}--content-block__children
-    .#{$prefix}--content-block-segmented__media
-    ::slotted(:not([slot]):last-of-type) {
-    margin-block-end: 0;
-  }
-
   .#{$prefix}--content-block-segmented .#{$prefix}--content-group {
     display: block;
     margin-block: $spacing-10;

packages/styles/scss/components/content-block-simple/_content-block-simple.scss

@@ -12,15 +12,4 @@
 @use '../image';
 
 @mixin content-block-simple {
-  .#{$prefix}--content-block-simple__media-video {
-    max-inline-size: to-rem(640px);
-  }
-
-  .#{$prefix}--content-block-simple__content {
-    .#{$prefix}--content-item {
-      &:first-of-type {
-        margin-block-start: 0;
-      }
-    }
-  }
 }

packages/styles/scss/components/content-group-cards/_content-group-cards.scss

@@ -22,10 +22,8 @@
 }
 
 @mixin content-group-cards {
-  :host(#{$c4d-prefix}-content-group-cards),
-  .#{$prefix}--content-group-cards {
-    ::slotted([slot='copy']),
-    .#{$prefix}--content-group__copy {
+  :host(#{$c4d-prefix}-content-group-cards) {
+    ::slotted([slot='copy']) {
       margin-block-end: $spacing-09;
 
       @include breakpoint(md) {
@@ -46,8 +44,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-content-group-cards-item),
-  .#{$prefix}--content-group-cards-item__col {
+  :host(#{$c4d-prefix}-content-group-cards-item) {
     margin-block: list.slash($grid-gutter, 2);
     padding-inline: list.slash($grid-gutter, 2);
 

packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss

@@ -25,15 +25,5 @@
 
   div.#{$prefix}--content-group-pictograms {
     padding-inline: 0;
-
-    .#{$prefix}--content-group__title {
-      padding-inline: $spacing-05;
-    }
-  }
-
-  .#{$prefix}--content-group-pictograms__item:last-child {
-    .#{$prefix}--content-item {
-      margin-block-end: 0;
-    }
   }
 }

packages/styles/scss/components/content-group-simple/_content-group-simple.scss

@@ -13,13 +13,7 @@
 
 @mixin content-group-simple {
   :host(#{$c4d-prefix}-content-group-simple)
-    ::slotted(#{$c4d-prefix}-content-group-copy),
-  .#{$prefix}--content-group-simple .#{$prefix}--content-group__copy {
+    ::slotted(#{$c4d-prefix}-content-group-copy) {
     margin-block-end: $spacing-07;
   }
-
-  .bx--content-group__cta {
-    max-inline-size: calc(320px + $spacing-05);
-    padding-inline-end: 0;
-  }
 }

packages/styles/scss/components/content-item-row/_content-item-row.scss

@@ -142,15 +142,6 @@
     }
   }
 
-  .#{$prefix}--content-item-row__content-wrapper_with-media {
-    inline-size: 100%;
-    @include breakpoint(lg) {
-      @include make-col(8, 12);
-
-      padding-inline-start: $spacing-04;
-    }
-  }
-
   :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='media']) {
     display: block;
     padding-block-start: $spacing-07;
@@ -244,20 +235,6 @@
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-row) .#{$prefix}--content-item__cta {
-    .#{$prefix}--link-list {
-      padding: 0;
-
-      &:first-of-type {
-        padding: 0;
-      }
-    }
-
-    .#{$prefix}--link-list li:last-of-type {
-      margin-block-end: 0;
-    }
-  }
-
   :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='thumbnail']) {
     @include breakpoint(md) {
       @include make-col(3, 3);