chore(feature-card): use theme zoning

Applies theme zoning to feature card instead of inverse variant of card
style. This allows us to make feature card style simpler, especially
for Web Components.

packages/react/src/components/FeatureCard/FeatureCard.js

@@ -30,7 +30,6 @@ const FeatureCard = ({ card, onClick }) => {
         data-autoid={`${stablePrefix}--feature-card`}>
         <Card
           customClassName={`${prefix}--feature-card__card`}
-          inverse={true}
           onClick={onClick}
           {...card}
         />

packages/react/src/components/FeatureCardBlockLarge/FeatureCardBlockLarge.js

@@ -33,7 +33,6 @@ const FeatureCardBlockLarge = props => {
           <Card
             customClassName={`${prefix}--feature-card-block-large__card`}
             {...props}
-            inverse={true}
           />
         </div>
       </section>

packages/styles/scss/components/card/index.scss

@@ -127,7 +127,7 @@
     .#{$dds-prefix}-ce--card__footer
     ::slotted(svg[slot='icon']) {
     margin-left: 0;
-    color: $interactive-04;
+    color: $link-01;
   }
 
   :host(#{$dds-prefix}-card-footer[disabled])
@@ -145,7 +145,7 @@
 
     .#{$prefix}--card__cta__copy {
       margin-right: $carbon--spacing-03;
-      color: $interactive-04;
+      color: $link-01;
       @include carbon--type-style('body-short-02');
     }
 
@@ -212,13 +212,7 @@
     .#{$dds-prefix}-ce--card__footer
     ::slotted(svg[slot='icon']),
   :host(#{$dds-prefix}-card-footer[color-scheme='inverse'])
-    .#{$prefix}--card__cta__copy,
-  :host(#{$dds-prefix}-feature-card-footer)
-    .#{$dds-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']),
-  :host(#{$dds-prefix}-feature-cta-footer)
-    .#{$dds-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']) {
+    .#{$prefix}--card__cta__copy {
     color: $inverse-link;
   }
 }

packages/styles/scss/components/feature-card-block-large/_feature-card-block-large.scss

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
 @import '../../globals/vars';
 @import '../../globals/imports';
 @import '../../globals/utils/aspect-ratio';
@@ -34,7 +35,7 @@ $fcb-breakpoint-up--lg: map-get(
 
     :hover {
       .#{$prefix}--card__wrapper {
-        background: $inverse-hover-ui;
+        background: $hover-ui;
       }
     }
 
@@ -89,7 +90,9 @@ $fcb-breakpoint-up--lg: map-get(
     }
 
     .#{$prefix}--card__wrapper {
-      background: $inverse-02;
+      @include carbon--theme($carbon--theme--g90, true);
+
+      background-color: $ui-01;
       min-height: 50%;
       height: auto;
       padding: $spacing-07 $spacing-05;
@@ -114,7 +117,6 @@ $fcb-breakpoint-up--lg: map-get(
 
       .#{$prefix}--card__eyebrow {
         margin: 0 0 $spacing-05 0;
-        color: $inverse-01;
         @include carbon--type-style('body-long-02');
       }
 
@@ -165,14 +167,13 @@ $fcb-breakpoint-up--lg: map-get(
     .#{$dds-prefix}-ce--card__footer
     ::slotted(svg[slot='icon']),
   .#{$prefix}--feature-card-block-large
-    .#{$prefix}--feature-card-block-large__card.#{$prefix}--card--inverse
+    .#{$prefix}--feature-card-block-large__card.#{$prefix}--tile
     .#{$prefix}--card__cta,
   .#{$prefix}--feature-card-block-large
-    .#{$prefix}--feature-card-block-large__card.#{$prefix}--card--inverse
+    .#{$prefix}--feature-card-block-large__card.#{$prefix}--tile
     .#{$prefix}--card__cta:visited {
     margin-top: auto;
     float: none;
-    color: $inverse-link;
     width: $layout-03;
     height: $layout-03;
 

packages/styles/scss/components/feature-card/_feature-card.scss

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
 @import '../../globals/vars';
 @import '../../globals/imports';
 @import '../../components/image/image';
@@ -62,7 +63,6 @@
     ::slotted(svg[slot='footer']) {
       margin-top: auto;
       margin-left: auto;
-      color: $inverse-link;
     }
 
     .#{$prefix}--card {
@@ -74,6 +74,9 @@
     }
 
     .#{$prefix}--card__wrapper {
+      @include carbon--theme($carbon--theme--g90, true);
+
+      background-color: $ui-01;
       width: 100%;
       height: aspect-ratio(2, 1);
 

packages/styles/scss/components/tableofcontents/_tableofcontents.scss

@@ -37,11 +37,11 @@
     a,
     a:hover {
       color: $text-01;
-      border-left-color: $interactive-04;
+      border-left-color: $link-01;
     }
 
     &:hover {
-      border-left-color: $interactive-04;
+      border-left-color: $link-01;
     }
   }
 }

packages/web-components/src/components/card/card.ts

@@ -118,6 +118,7 @@ class DDSCard extends DDSLink {
 
   /**
    * 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.
    */
   @property({ attribute: 'color-scheme', reflect: true })
   colorScheme = BASIC_COLOR_SCHEME.REGULAR;

packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts

@@ -19,6 +19,7 @@ import '../../content-item/content-item';
 import '../content-block-media-content';
 import '../../card-link/card-link';
 import '../../feature-card/feature-card';
+import '../../feature-card/feature-card-footer';
 import readme from './README.stories.mdx';
 
 const heading = 'Lorem ipsum dolor sit amet.';

packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.scss

@@ -13,8 +13,6 @@
 @import '../feature-card/feature-card.scss';
 
 :host(#{$dds-prefix}-feature-card-block-medium) {
-  @extend :host(#{$dds-prefix}-feature-card);
-
   display: block;
 
   @include carbon--breakpoint-down('md') {

packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts

@@ -61,16 +61,6 @@ class DDSFeatureCardBlockMedium extends DDSFeatureCard {
     `;
   }
 
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    const { _linkNode: linkNode } = this;
-    if (linkNode) {
-      linkNode.classList.remove(`${prefix}--link`);
-      linkNode.classList.add(`${prefix}--card--inverse`);
-      linkNode.classList.add(`${prefix}--feature-card`);
-    }
-  }
-
   static get stableSelector() {
     return `${ddsPrefix}--feature-card-block-medium`;
   }

packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts

@@ -13,6 +13,7 @@ import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.j
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../feature-card';
+import '../feature-card-footer';
 
 export const Default = ({ parameters }) => {
   const { heading, defaultSrc, alt, href } = parameters?.props?.['dds-feature-card'] ?? {};

packages/web-components/src/components/feature-card/feature-card.scss

@@ -27,6 +27,5 @@
   .#{$dds-prefix}-ce--card__footer {
     justify-content: flex-end;
     align-items: flex-end;
-    color: $inverse-link;
   }
 }

packages/web-components/src/components/feature-card/feature-card.ts

@@ -29,7 +29,6 @@ class DDSFeatureCard extends DDSCard {
     const { _linkNode: linkNode } = this;
     if (linkNode) {
       linkNode.classList.remove(`${prefix}--link`);
-      linkNode.classList.add(`${prefix}--card--inverse`);
       linkNode.classList.add(`${prefix}--feature-card`);
     }
   }

packages/web-components/tests/snapshots/dds-feature-card-block-large.md

@@ -44,7 +44,7 @@
 ```
 <div class="bx--feature-card-block-large__container">
   <a
-    class="bx--card bx--card--inverse bx--card--link bx--feature-card-block-large bx--tile bx--tile--clickable"
+    class="bx--card bx--card--link bx--feature-card-block-large bx--tile bx--tile--clickable"
     href="https://example.com"
     id="link"
   >

packages/web-components/tests/snapshots/dds-feature-card-block-medium.md

@@ -54,7 +54,7 @@
   data-autoid="dds--feature-card"
 >
   <a
-    class="bx--card bx--card--inverse bx--card--link bx--feature-card bx--tile bx--tile--clickable"
+    class="bx--card bx--card--link bx--feature-card bx--tile bx--tile--clickable"
     href="https://example.com"
     id="link"
   >

packages/web-components/tests/snapshots/dds-feature-card.md

@@ -41,7 +41,7 @@
 
 ```
 <a
-  class="bx--card bx--card--inverse bx--card--link bx--feature-card bx--tile bx--tile--clickable"
+  class="bx--card bx--card--link bx--feature-card bx--tile bx--tile--clickable"
   href="https://example.com"
   id="link"
 >