fix(expressive): remove productive mixin from component styles and re…

…place with expressive tokens (#4957)

### Related Ticket(s)

Remove productive mixin & apply expressive tokens to Carbon for IBM.com components #4748

### Description

Remove productive mixin from components (leave as is in the masthead) styles and replace with expressive tokens

### Changelog

**Changed**

- swap tokens with expressive tokens

**Removed**

- unused card video footer styles
- edit the LogoGrid card props to set card heading as intended from the LogoGrid design specs (https://ibm.ent.box.com/file/661851053906)
- productive token mixin use from components other than masthead

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/react/src/components/LogoGrid/LogoGrid.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -31,7 +31,7 @@ const LogoGrid = ({ heading, logosGroup, ctaCopy, ctaHref, hideBorder }) => {
     cta = {
       style: 'card',
       type: 'local',
-      copy: ctaCopy,
+      heading: ctaCopy,
       cta: {
         href: ctaHref,
       },

packages/styles/scss/components/callout-data/_callout-data.scss

@@ -60,7 +60,7 @@
 
   :host(#{$dds-prefix}-callout-data-source),
   .#{$prefix}--callout-data__source {
-    @include carbon--type-style('body-short-01', true);
+    @include carbon--type-style('caption-01');
 
     width: 90%;
     max-width: carbon--mini-units(80);

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2020
+// Copyright IBM Corp. 2016, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -66,8 +66,7 @@
     .#{$prefix}--callout__content
     .#{$prefix}--content-block {
     .#{$prefix}--image__caption {
-      @include use-carbon-productive-tokens();
-      @include carbon--type-style('body-short-01', true);
+      @include carbon--type-style('caption-01');
 
       margin-top: $carbon--spacing-03;
       color: $text-01;

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -94,14 +94,6 @@
       padding: 0;
     }
 
-    .#{$prefix}--card__video {
-      .#{$prefix}--card__footer span {
-        color: $text-02;
-        @include use-carbon-productive-tokens();
-        @include carbon--type-style('body-short-01');
-      }
-    }
-
     &.#{$prefix}--link:focus,
     .#{$prefix}--link:focus {
       outline: 2px solid $focus;
@@ -111,8 +103,7 @@
 
   :host(#{$dds-prefix}-card-eyebrow),
   .#{$prefix}--card__eyebrow {
-    @include use-carbon-productive-tokens();
-    @include carbon--type-style('body-short-01');
+    @include carbon--type-style('label-01');
 
     margin-bottom: $carbon--spacing-03;
     color: $text-02;

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

@@ -51,8 +51,7 @@
   .#{$prefix}--content-item-horizontal__item--eyebrow {
     color: $text-05;
     padding-bottom: $spacing-03;
-    @include use-carbon-productive-tokens();
-    @include carbon--type-style('body-long-01');
+    @include carbon--type-style('label-01');
   }
 
   :host(#{$dds-prefix}-content-item-horizontal) ::slotted([slot='heading']),

packages/styles/scss/components/image-with-caption/image-with-caption.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -87,8 +87,7 @@
   }
 
   .#{$prefix}--image__caption {
-    @include use-carbon-productive-tokens();
-    @include carbon--type-style('body-short-01', true);
+    @include carbon--type-style('caption-01');
 
     margin-top: $carbon--spacing-03;
     color: $text-05;

packages/styles/scss/components/locale-modal/_locale-modal.scss

@@ -117,8 +117,7 @@
           margin-right: $carbon--spacing-03;
         }
 
-        @include use-carbon-productive-tokens();
-        @include carbon--type-style(body-short-01, true);
+        @include carbon--type-style('caption-01');
       }
 
       .#{$prefix}--modal-header__heading {
@@ -259,8 +258,7 @@
     padding: $carbon--spacing-05;
     min-height: $carbon--spacing-09;
 
-    @include use-carbon-productive-tokens();
-    @include carbon--type-style(heading-01, true);
+    @include carbon--type-style(heading-02);
   }
 
   .#{$prefix}--locale-modal__list {

packages/styles/scss/components/logo-grid/_logo-grid.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -48,11 +48,6 @@
       @include carbon--breakpoint('md') {
         @include carbon--make-col(1, 3);
       }
-
-      .#{$prefix}--card__heading {
-        @include use-carbon-productive-tokens();
-        @include carbon--type-style('productive-heading-01');
-      }
     }
 
     a.#{$prefix}--card__CTA {
@@ -133,6 +128,13 @@
   :host(#{$dds-prefix}-logo-grid-link) ::slotted(svg) {
     fill: $link-01;
   }
+
+  :host(#{$dds-prefix}-logo-grid-link) ::slotted(#{$dds-prefix}-card-heading),
+  .#{$prefix}--logo-grid
+    .#{$prefix}--content-block__cta
+    .#{$prefix}--card__heading {
+    @include carbon--type-style('productive-heading-01');
+  }
 }
 @include exports('logo-grid') {
   @include logo-grid;

packages/styles/scss/components/video-player/_video-player.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -56,8 +56,7 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
   }
 
   .#{$prefix}--video-player__video-caption {
-    @include use-carbon-productive-tokens();
-    @include carbon--type-style(body-long-01, true);
+    @include carbon--type-style('caption-01');
 
     padding-top: var(--#{$dds-prefix}--video-caption--padding, $spacing-05);
     color: var(--#{$dds-prefix}--video-caption--color, $text-05);

packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.ts

@@ -11,6 +11,7 @@ import '../logo-grid';
 import '../../content-block/content-block-heading';
 import '../logo-grid-item';
 import '../logo-grid-link';
+import '../../card/card-heading';
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
 import { boolean } from '@storybook/addon-knobs';
 import { html } from 'lit-element';
@@ -32,7 +33,7 @@ export const Default = ({ parameters }) => {
           `
         )}
       <dds-logo-grid-link href="${ctaHref}">
-        <p>${ctaCopy}</p>
+        <dds-card-heading>${ctaCopy}</dds-card-heading>
         ${ArrowRight20({ slot: 'footer' })}
       </dds-logo-grid-link>
     </dds-logo-grid>