feat(tag): expressive theme update (carbon-design-system#4166)

### Related Ticket(s)

carbon-design-system#3669

### Description

Changing the Tag styles used for Expressive Theme. Bigger font, darker colors, more padding is included. 

![image](https://user-images.githubusercontent.com/24970122/95804112-a5ca1e80-0cb6-11eb-90e3-9bea60302f0a.png)

(Allow icon will be included in a separate PR to the carbon-components repository)

### Changelog

**Changed**

- Expressive theme styles added
- Increased overall padding
- Darkened text color
- Increased line height and font


<!-- 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: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->

packages/styles/scss/themes/expressive/components/_tag.scss

@@ -16,6 +16,37 @@
 /// @group tag-expressive
 @mixin tag-expressive {
   .#{$prefix}--tag {
+    @include carbon--type-style('label-01');
+
+    /* stylelint-disable-next-line declaration-property-unit-whitelist */
+    line-height: carbon--rem(20px);
+
     height: carbon--rem(32px); /* carbon--container-02 */
+    padding: 6px $spacing-05;
+  }
+
+  .#{$prefix}--tag--filter {
+    padding-right: $spacing-04;
+  }
+
+  .#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled {
+    color: $disabled-02;
+  }
+
+  .#{$prefix}--tag__close-icon {
+    position: relative;
+    left: 6px;
+
+    width: $icon-size-01;
+    height: $icon-size-01;
+
+    margin-left: 0;
+    padding: $spacing-01;
+
+    &:focus,
+    &:hover {
+      padding-left: $spacing-01;
+    }
   }
 }

packages/styles/scss/themes/expressive/index.scss

@@ -29,6 +29,7 @@
 @import 'components/overflow-menu';
 @import 'components/progressive-indicator';
 @import 'components/tabs';
+@import 'components/tag';
 @import 'components/text-area';
 @import 'components/text-input';
 @import 'components/tile';
@@ -72,6 +73,7 @@
   @include overflow-menu-expressive;
   @include progressive-indicator-expressive;
   @include tabs-expressive;
+  @include tag-expressive;
   @include text-area-expressive;
   @include text-input-expressive;
   @include tile-expressive;

packages/styles/src/carbon-stories/Tag/Tag-story.js

@@ -39,7 +39,7 @@ export default {
 
 export const Default = () => (
   <Tag className="some-class" {...props.regular()}>
-    {text('Content (children)', 'This is not a tag')}
+    {text('Content (children)', 'This is a tag')}
   </Tag>
 );
 
@@ -57,7 +57,7 @@ Default.story = {
 
 export const Filter = () => (
   <Tag className="some-class" {...props.filter()} filter>
-    {text('Content (children)', 'This is not a tag')}
+    {text('Content (children)', 'This is a tag')}
   </Tag>
 );