feat(Tag): add Tag to @carbon/styles

carbon-design-system · Jul 7, 2021 · 974274b · 974274b
1 parent fbf027f
commit 974274b
Show file tree

Hide file tree

Showing 3 changed files with 730 additions and 54 deletions.
diff --git a/packages/styles/scss/components/tag/_mixins.scss b/packages/styles/scss/components/tag/_mixins.scss
@@ -0,0 +1,22 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// 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 '../../config' as *;
+
+/// @access private
+/// @group tag
+@mixin tag-theme($bg-color, $text-color, $filter-hover-color: $bg-color) {
+  background-color: $bg-color;
+  color: $text-color;
+
+  &.#{$prefix}--tag--interactive,
+  .#{$prefix}--tag__close-icon {
+    &:hover {
+      background-color: $filter-hover-color;
+    }
+  }
+}
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
@@ -5,38 +5,28 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../theme';
+@use 'sass:meta';
+@use '../../theme' as *;
 @use '../../utilities/button-reset';
 @use '../../type';
-@use '../../motion';
-
+@use '../../motion' as *;
 @use '../../config' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/high-contrast-mode' as *;
 @use '../../spacing' as *;
-
-/// @access private
-/// @group tag
-@mixin tag-theme($bg-color, $text-color, $filter-hover-color: $bg-color) {
-  background-color: $bg-color;
-  color: $text-color;
-
-  &.#{$prefix}--tag--interactive,
-  .#{$prefix}--tag__close-icon {
-    &:hover {
-      background-color: $filter-hover-color;
-    }
-  }
-}
+@use './tokens';
+@use './mixins' as *;
+@use '../../utilities/skeleton';
 
 /// Tag styles
 /// @access private
 /// @group tag
 @mixin tag {
   .#{$prefix}--tag {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-gray'),
-      get-token-value($tag-colors, 'tag-color-gray'),
-      get-token-value($tag-colors, 'tag-hover-gray')
+      get-token-value(var(--tag-background-gray)),
+      get-token-value(var(--tag-color-gray)),
+      get-token-value(var(--tag-hover-gray))
     );
 
     display: inline-flex;
@@ -61,81 +51,81 @@
 
   .#{$prefix}--tag--red {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-red'),
-      get-token-value($tag-colors, 'tag-color-red'),
-      get-token-value($tag-colors, 'tag-hover-red')
+      get-token-value(var(--tag-background-red)),
+      get-token-value(var(--tag-color-red)),
+      get-token-value(var(--tag-hover-red))
     );
   }
 
   .#{$prefix}--tag--magenta {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-magenta'),
-      get-token-value($tag-colors, 'tag-color-magenta'),
-      get-token-value($tag-colors, 'tag-hover-magenta')
+      get-token-value(var(--tag-background-magenta)),
+      get-token-value(var(--tag-color-magenta)),
+      get-token-value(var(--tag-hover-magenta))
     );
   }
 
   .#{$prefix}--tag--purple {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-purple'),
-      get-token-value($tag-colors, 'tag-color-purple'),
-      get-token-value($tag-colors, 'tag-hover-purple')
+      get-token-value(var(--tag-background-purple)),
+      get-token-value(var(--tag-color-purple)),
+      get-token-value(var(--tag-hover-purple))
     );
   }
 
   .#{$prefix}--tag--blue {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-blue'),
-      get-token-value($tag-colors, 'tag-color-blue'),
-      get-token-value($tag-colors, 'tag-hover-blue')
+      get-token-value(var(--tag-background-blue)),
+      get-token-value(var(--tag-color-blue)),
+      get-token-value(var(--tag-hover-blue))
     );
   }
 
   .#{$prefix}--tag--cyan {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-cyan'),
-      get-token-value($tag-colors, 'tag-color-cyan'),
-      get-token-value($tag-colors, 'tag-hover-cyan')
+      get-token-value(var(--tag-background-cyan)),
+      get-token-value(var(--tag-color-cyan)),
+      get-token-value(var(--tag-hover-cyan))
     );
   }
 
   .#{$prefix}--tag--teal {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-teal'),
-      get-token-value($tag-colors, 'tag-color-teal'),
-      get-token-value($tag-colors, 'tag-hover-teal')
+      get-token-value(var(--tag-background-teal)),
+      get-token-value(var(--tag-color-teal)),
+      get-token-value(var(--tag-hover-teal))
     );
   }
 
   .#{$prefix}--tag--green {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-green'),
-      get-token-value($tag-colors, 'tag-color-green'),
-      get-token-value($tag-colors, 'tag-hover-green')
+      get-token-value(var(--tag-background-green)),
+      get-token-value(var(--tag-color-green)),
+      get-token-value(var(--tag-hover-green))
     );
   }
 
   .#{$prefix}--tag--gray {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-gray'),
-      get-token-value($tag-colors, 'tag-color-gray'),
-      get-token-value($tag-colors, 'tag-hover-gray')
+      get-token-value(var(--tag-background-gray)),
+      get-token-value(var(--tag-color-gray)),
+      get-token-value(var(--tag-hover-gray))
     );
   }
 
   .#{$prefix}--tag--cool-gray {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-cool-gray'),
-      get-token-value($tag-colors, 'tag-color-cool-gray'),
-      get-token-value($tag-colors, 'tag-hover-cool-gray')
+      get-token-value(var(--tag-background-cool-gray)),
+      get-token-value(var(--tag-color-cool-gray)),
+      get-token-value(var(--tag-hover-cool-gray))
     );
   }
 
   .#{$prefix}--tag--warm-gray {
     @include tag-theme(
-      get-token-value($tag-colors, 'tag-background-warm-gray'),
-      get-token-value($tag-colors, 'tag-color-warm-gray'),
-      get-token-value($tag-colors, 'tag-hover-warm-gray')
+      get-token-value(var(--tag-background-warm-gray)),
+      get-token-value(var(--tag-color-warm-gray)),
+      get-token-value(var(--tag-hover-warm-gray))
     );
   }
 
@@ -186,7 +176,7 @@
   }
 
   .#{$prefix}--tag--interactive {
-    transition: background-color $duration--fast-01 motion(entrance, productive);
+    transition: background-color $duration-fast-01 motion(entrance, productive);
   }
 
   .#{$prefix}--tag__close-icon {
@@ -203,8 +193,8 @@
     border-radius: 50%;
     color: currentColor;
     cursor: pointer;
-    transition: background-color $duration--fast-01 motion(standard, productive),
-      box-shadow $duration--fast-01 motion(standard, productive);
+    transition: background-color $duration-fast-01 motion(standard, productive),
+      box-shadow $duration-fast-01 motion(standard, productive);
     svg {
       fill: currentColor;
     }
@@ -267,7 +257,6 @@
 
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
-    @include skeleton;
     @include tag-theme(
       $bg-color: $skeleton-background,
       $text-color: $text-primary