diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
index da3a93ac9fd4..a4f6233c395b 100644
--- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -285,6 +285,7 @@ Array [
   "supportSuccessInverse",
   "supportWarning",
   "supportWarningInverse",
+  "tagTokens",
   "teal",
   "teal10",
   "teal100",
diff --git a/packages/styles/scss/components/tag/_tokens.scss b/packages/styles/scss/components/tag/_tokens.scss
index abc272d45977..77c6908ce510 100644
--- a/packages/styles/scss/components/tag/_tokens.scss
+++ b/packages/styles/scss/components/tag/_tokens.scss
@@ -6,678 +6,680 @@
 //
 
 @use 'sass:color';
+@use 'sass:map';
 @use '../../config';
 @use '../../colors';
 @use '../../themes';
 @use '../../theme' as *;
 @use '../../utilities/component-tokens';
+@use '@carbon/themes/scss/component-tokens' as tag;
 
 // red
 $tag-background-red: (
-  fallback: colors.$red-20,
+  fallback: map.get(tag.$tag-background-red, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$red-20,
+      value: map.get(tag.$tag-background-red, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$red-20,
+      value: map.get(tag.$tag-background-red, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$red-70,
+      value: map.get(tag.$tag-background-red, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$red-70,
+      value: map.get(tag.$tag-background-red, g-100),
     ),
   ),
 ) !default;
 
 $tag-color-red: (
-  fallback: colors.$red-80,
+  fallback: map.get(tag.$tag-color-red, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$red-80,
+      value: map.get(tag.$tag-color-red, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$red-80,
+      value: map.get(tag.$tag-color-red, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$red-20,
+      value: map.get(tag.$tag-color-red, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$red-20,
+      value: map.get(tag.$tag-color-red, g-100),
     ),
   ),
 ) !default;
 
 $tag-hover-red: (
-  fallback: colors.$red-30,
+  fallback: map.get(tag.$tag-hover-red, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$red-30,
+      value: map.get(tag.$tag-hover-red, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$red-30,
+      value: map.get(tag.$tag-hover-red, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$red-70-hover,
+      value: map.get(tag.$tag-hover-red, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$red-70-hover,
+      value: map.get(tag.$tag-hover-red, g-100),
     ),
   ),
 ) !default;
 
 // magenta
 $tag-background-magenta: (
-  fallback: colors.$magenta-20,
+  fallback: map.get(tag.$tag-background-magenta, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$magenta-20,
+      value: map.get(tag.$tag-background-magenta, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$magenta-20,
+      value: map.get(tag.$tag-background-magenta, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$magenta-70,
+      value: map.get(tag.$tag-background-magenta, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$magenta-70,
+      value: map.get(tag.$tag-background-magenta, g-100),
     ),
   ),
 ) !default;
 
 $tag-color-magenta: (
-  fallback: colors.$magenta-80,
+  fallback: map.get(tag.$tag-color-magenta, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$magenta-80,
+      value: map.get(tag.$tag-color-magenta, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$magenta-80,
+      value: map.get(tag.$tag-color-magenta, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$magenta-20,
+      value: map.get(tag.$tag-color-magenta, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$magenta-20,
+      value: map.get(tag.$tag-color-magenta, g-100),
     ),
   ),
 ) !default;
 
 $tag-hover-magenta: (
-  fallback: colors.$magenta-30,
+  fallback: map.get(tag.$tag-hover-magenta, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$magenta-30,
+      value: map.get(tag.$tag-hover-magenta, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$magenta-30,
+      value: map.get(tag.$tag-hover-magenta, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$magenta-70-hover,
+      value: map.get(tag.$tag-hover-magenta, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$magenta-70-hover,
+      value: map.get(tag.$tag-hover-magenta, g-100),
     ),
   ),
 ) !default;
 
 // purple
 $tag-background-purple: (
-  fallback: colors.$purple-20,
+  fallback: map.get(tag.$tag-background-purple, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$purple-20,
+      value: map.get(tag.$tag-background-purple, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$purple-20,
+      value: map.get(tag.$tag-background-purple, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$purple-70,
+      value: map.get(tag.$tag-background-purple, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$purple-70,
+      value: map.get(tag.$tag-background-purple, g-100),
     ),
   ),
 ) !default;
 
 $tag-color-purple: (
-  fallback: colors.$purple-80,
+  fallback: map.get(tag.$tag-color-purple, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$purple-80,
+      value: map.get(tag.$tag-color-purple, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$purple-80,
+      value: map.get(tag.$tag-color-purple, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$purple-20,
+      value: map.get(tag.$tag-color-purple, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$purple-20,
+      value: map.get(tag.$tag-color-purple, g-100),
     ),
   ),
 ) !default;
 
 $tag-hover-purple: (
-  fallback: colors.$purple-30,
+  fallback: map.get(tag.$tag-hover-purple, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$purple-30,
+      value: map.get(tag.$tag-hover-purple, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$purple-30,
+      value: map.get(tag.$tag-hover-purple, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$purple-70-hover,
+      value: map.get(tag.$tag-hover-purple, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$purple-70-hover,
+      value: map.get(tag.$tag-hover-purple, g-100),
     ),
   ),
 ) !default;
 
 // blue
 $tag-background-blue: (
-  fallback: colors.$blue-20,
+  fallback: map.get(tag.$tag-background-blue, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$blue-20,
+      value: map.get(tag.$tag-background-blue, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$blue-20,
+      value: map.get(tag.$tag-background-blue, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$blue-70,
+      value: map.get(tag.$tag-background-blue, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$blue-70,
+      value: map.get(tag.$tag-background-blue, g-100),
     ),
   ),
 ) !default;
 
 $tag-color-blue: (
-  fallback: colors.$blue-80,
+  fallback: map.get(tag.$tag-color-blue, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$blue-80,
+      value: map.get(tag.$tag-color-blue, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$blue-80,
+      value: map.get(tag.$tag-color-blue, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$blue-20,
+      value: map.get(tag.$tag-color-blue, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$blue-20,
+      value: map.get(tag.$tag-color-blue, g-100),
     ),
   ),
 ) !default;
 
 $tag-hover-blue: (
-  fallback: colors.$blue-30,
+  fallback: map.get(tag.$tag-hover-blue, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$blue-30,
+      value: map.get(tag.$tag-hover-blue, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$blue-30,
+      value: map.get(tag.$tag-hover-blue, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$blue-70-hover,
+      value: map.get(tag.$tag-hover-blue, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$blue-70-hover,
+      value: map.get(tag.$tag-hover-blue, g-100),
     ),
   ),
 ) !default;
 
 // cyan
 $tag-background-cyan: (
-  fallback: colors.$cyan-20,
+  fallback: map.get(tag.$tag-background-cyan, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$cyan-20,
+      value: map.get(tag.$tag-background-cyan, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$cyan-20,
+      value: map.get(tag.$tag-background-cyan, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$cyan-70,
+      value: map.get(tag.$tag-background-cyan, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$cyan-70,
+      value: map.get(tag.$tag-background-cyan, g-100),
     ),
   ),
 ) !default;
 
 $tag-color-cyan: (
-  fallback: colors.$cyan-80,
+  fallback: map.get(tag.$tag-color-cyan, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$cyan-80,
+      value: map.get(tag.$tag-color-cyan, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$cyan-80,
+      value: map.get(tag.$tag-color-cyan, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$cyan-20,
+      value: map.get(tag.$tag-color-cyan, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$cyan-20,
+      value: map.get(tag.$tag-color-cyan, g-100),
     ),
   ),
 ) !default;
 
 $tag-hover-cyan: (
-  fallback: colors.$cyan-30,
+  fallback: map.get(tag.$tag-hover-cyan, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$cyan-30,
+      value: map.get(tag.$tag-hover-cyan, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$cyan-30,
+      value: map.get(tag.$tag-hover-cyan, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$cyan-70-hover,
+      value: map.get(tag.$tag-hover-cyan, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$cyan-70-hover,
+      value: map.get(tag.$tag-hover-cyan, g-100),
     ),
   ),
 ) !default;
 
 // teal
 $tag-background-teal: (
-  fallback: colors.$teal-20,
+  fallback: map.get(tag.$tag-background-teal, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$teal-20,
+      value: map.get(tag.$tag-background-teal, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$teal-20,
+      value: map.get(tag.$tag-background-teal, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$teal-70,
+      value: map.get(tag.$tag-background-teal, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$teal-70,
+      value: map.get(tag.$tag-background-teal, g-100),
     ),
   ),
 ) !default;
 
 $tag-color-teal: (
-  fallback: colors.$teal-80,
+  fallback: map.get(tag.$tag-color-teal, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$teal-80,
+      value: map.get(tag.$tag-color-teal, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$teal-80,
+      value: map.get(tag.$tag-color-teal, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$teal-20,
+      value: map.get(tag.$tag-color-teal, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$teal-20,
+      value: map.get(tag.$tag-color-teal, g-100),
     ),
   ),
 ) !default;
 
 $tag-hover-teal: (
-  fallback: colors.$teal-30,
+  fallback: map.get(tag.$tag-hover-teal, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$teal-30,
+      value: map.get(tag.$tag-hover-teal, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$teal-30,
+      value: map.get(tag.$tag-hover-teal, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$teal-70-hover,
+      value: map.get(tag.$tag-hover-teal, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$teal-70-hover,
+      value: map.get(tag.$tag-hover-teal, g-100),
     ),
   ),
 ) !default;
 
 // green
 $tag-background-green: (
-  fallback: colors.$green-20,
+  fallback: map.get(tag.$tag-background-green, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$green-20,
+      value: map.get(tag.$tag-background-green, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$green-20,
+      value: map.get(tag.$tag-background-green, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$green-70,
+      value: map.get(tag.$tag-background-green, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$green-70,
+      value: map.get(tag.$tag-background-green, g-100),
     ),
   ),
 ) !default;
 
 $tag-color-green: (
-  fallback: colors.$green-80,
+  fallback: map.get(tag.$tag-color-green, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$green-80,
+      value: map.get(tag.$tag-color-green, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$green-80,
+      value: map.get(tag.$tag-color-green, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$green-20,
+      value: map.get(tag.$tag-color-green, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$green-20,
+      value: map.get(tag.$tag-color-green, g-100),
     ),
   ),
 ) !default;
 
 $tag-hover-green: (
-  fallback: colors.$green-30,
+  fallback: map.get(tag.$tag-hover-green, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$green-30,
+      value: map.get(tag.$tag-hover-green, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$green-30,
+      value: map.get(tag.$tag-hover-green, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$green-70-hover,
+      value: map.get(tag.$tag-hover-green, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$green-70-hover,
+      value: map.get(tag.$tag-hover-green, g-100),
     ),
   ),
 ) !default;
 
 // gray
 $tag-background-gray: (
-  fallback: colors.$gray-20,
+  fallback: map.get(tag.$tag-background-gray, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$gray-20,
+      value: map.get(tag.$tag-background-gray, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$gray-20,
+      value: map.get(tag.$tag-background-gray, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-70,
+      value: map.get(tag.$tag-background-gray, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-70,
+      value: map.get(tag.$tag-background-gray, g-100),
     ),
   ),
 ) !default;
 
 $tag-color-gray: (
-  fallback: colors.$gray-80,
+  fallback: map.get(tag.$tag-color-gray, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$gray-80,
+      value: map.get(tag.$tag-color-gray, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$gray-80,
+      value: map.get(tag.$tag-color-gray, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-20,
+      value: map.get(tag.$tag-color-gray, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-20,
+      value: map.get(tag.$tag-color-gray, g-100),
     ),
   ),
 ) !default;
 
 $tag-hover-gray: (
-  fallback: colors.$gray-30,
+  fallback: map.get(tag.$tag-hover-gray, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$gray-30,
+      value: map.get(tag.$tag-hover-gray, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$gray-30,
+      value: map.get(tag.$tag-hover-gray, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-70-hover,
+      value: map.get(tag.$tag-hover-gray, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-70-hover,
+      value: map.get(tag.$tag-hover-gray, g-100),
     ),
   ),
 ) !default;
 
 // cool-gray
 $tag-background-cool-gray: (
-  fallback: colors.$cool-gray-20,
+  fallback: map.get(tag.$tag-background-cool-gray, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$cool-gray-20,
+      value: map.get(tag.$tag-background-cool-gray, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$cool-gray-20,
+      value: map.get(tag.$tag-background-cool-gray, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$cool-gray-70,
+      value: map.get(tag.$tag-background-cool-gray, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$cool-gray-70,
+      value: map.get(tag.$tag-background-cool-gray, g-100),
     ),
   ),
 ) !default;
 
 $tag-color-cool-gray: (
-  fallback: colors.$cool-gray-80,
+  fallback: map.get(tag.$tag-color-cool-gray, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$cool-gray-80,
+      value: map.get(tag.$tag-color-cool-gray, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$cool-gray-80,
+      value: map.get(tag.$tag-color-cool-gray, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$cool-gray-20,
+      value: map.get(tag.$tag-color-cool-gray, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$cool-gray-20,
+      value: map.get(tag.$tag-color-cool-gray, g-100),
     ),
   ),
 ) !default;
 
 $tag-hover-cool-gray: (
-  fallback: colors.$cool-gray-30,
+  fallback: map.get(tag.$tag-hover-cool-gray, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$cool-gray-30,
+      value: map.get(tag.$tag-hover-cool-gray, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$cool-gray-30,
+      value: map.get(tag.$tag-hover-cool-gray, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$cool-gray-70-hover,
+      value: map.get(tag.$tag-hover-cool-gray, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$cool-gray-70-hover,
+      value: map.get(tag.$tag-hover-cool-gray, g-100),
     ),
   ),
 ) !default;
 
 // warm-gray
 $tag-background-warm-gray: (
-  fallback: colors.$warm-gray-20,
+  fallback: map.get(tag.$tag-background-warm-gray, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$warm-gray-20,
+      value: map.get(tag.$tag-background-warm-gray, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$warm-gray-20,
+      value: map.get(tag.$tag-background-warm-gray, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$warm-gray-70,
+      value: map.get(tag.$tag-background-warm-gray, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$warm-gray-70,
+      value: map.get(tag.$tag-background-warm-gray, g-100),
     ),
   ),
 ) !default;
 
 $tag-color-warm-gray: (
-  fallback: colors.$warm-gray-80,
+  fallback: map.get(tag.$tag-color-warm-gray, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$warm-gray-80,
+      value: map.get(tag.$tag-color-warm-gray, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$warm-gray-80,
+      value: map.get(tag.$tag-color-warm-gray, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$warm-gray-20,
+      value: map.get(tag.$tag-color-warm-gray, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$warm-gray-20,
+      value: map.get(tag.$tag-color-warm-gray, g-100),
     ),
   ),
 ) !default;
 
 $tag-hover-warm-gray: (
-  fallback: colors.$warm-gray-30,
+  fallback: map.get(tag.$tag-hover-warm-gray, white-theme),
   values: (
     (
       theme: themes.$white,
-      value: colors.$warm-gray-30,
+      value: map.get(tag.$tag-hover-warm-gray, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: colors.$warm-gray-30,
+      value: map.get(tag.$tag-hover-warm-gray, g-10),
     ),
     (
       theme: themes.$g90,
-      value: colors.$warm-gray-70-hover,
+      value: map.get(tag.$tag-hover-warm-gray, g-90),
     ),
     (
       theme: themes.$g100,
-      value: colors.$warm-gray-70-hover,
+      value: map.get(tag.$tag-hover-warm-gray, g-100),
     ),
   ),
 ) !default;
diff --git a/packages/themes/scss/_component-tokens.scss b/packages/themes/scss/_component-tokens.scss
index baf38bf3493e..053692cd7b23 100644
--- a/packages/themes/scss/_component-tokens.scss
+++ b/packages/themes/scss/_component-tokens.scss
@@ -6,3 +6,4 @@
 //
 
 @forward 'generated/button-tokens';
+@forward 'generated/tag-tokens';
diff --git a/packages/themes/src/component-tokens/tag/index.js b/packages/themes/src/component-tokens/tag/index.js
index e69de29bb2d1..1eebf273415f 100644
--- a/packages/themes/src/component-tokens/tag/index.js
+++ b/packages/themes/src/component-tokens/tag/index.js
@@ -0,0 +1 @@
+export * as tagTokens from './tokens';
diff --git a/packages/themes/src/component-tokens/tag/tokens.js b/packages/themes/src/component-tokens/tag/tokens.js
new file mode 100644
index 000000000000..57ca80293fcf
--- /dev/null
+++ b/packages/themes/src/component-tokens/tag/tokens.js
@@ -0,0 +1,260 @@
+import {
+  red20,
+  red70,
+  red80,
+  red30,
+  red70Hover,
+  magenta20,
+  magenta70,
+  magenta80,
+  magenta30,
+  magenta70Hover,
+  purple20,
+  purple70,
+  purple80,
+  purple30,
+  purple70Hover,
+  blue20,
+  blue70,
+  blue80,
+  blue30,
+  blue70Hover,
+  cyan20,
+  cyan70,
+  cyan80,
+  cyan30,
+  cyan70Hover,
+  teal20,
+  teal70,
+  teal80,
+  teal30,
+  teal70Hover,
+  green20,
+  green70,
+  green80,
+  green30,
+  green70Hover,
+  gray20,
+  gray70,
+  gray80,
+  gray30,
+  gray70Hover,
+  warmGray20,
+  warmGray70,
+  warmGray80,
+  warmGray30,
+  warmGray70Hover,
+  coolGray20,
+  coolGray70,
+  coolGray80,
+  coolGray30,
+  coolGray70Hover,
+} from '@carbon/colors';
+
+export const tagBackgroundRed = {
+  whiteTheme: red20,
+  g10: red20,
+  g90: red70,
+  g100: red70,
+};
+
+export const tagColorRed = {
+  whiteTheme: red80,
+  g10: red80,
+  g90: red20,
+  g100: red20,
+};
+
+export const tagHoverRed = {
+  whiteTheme: red30,
+  g10: red30,
+  g90: red70Hover,
+  g100: red70Hover,
+};
+
+export const tagBackgroundMagenta = {
+  whiteTheme: magenta20,
+  g10: magenta20,
+  g90: magenta70,
+  g100: magenta70,
+};
+
+export const tagColorMagenta = {
+  whiteTheme: magenta80,
+  g10: magenta80,
+  g90: magenta20,
+  g100: magenta20,
+};
+
+export const tagHoverMagenta = {
+  whiteTheme: magenta30,
+  g10: magenta30,
+  g90: magenta70Hover,
+  g100: magenta70Hover,
+};
+
+export const tagBackgroundPurple = {
+  whiteTheme: purple20,
+  g10: purple20,
+  g90: purple70,
+  g100: purple70,
+};
+
+export const tagColorPurple = {
+  whiteTheme: purple80,
+  g10: purple80,
+  g90: purple20,
+  g100: purple20,
+};
+
+export const tagHoverPurple = {
+  whiteTheme: purple30,
+  g10: purple30,
+  g90: purple70Hover,
+  g100: purple70Hover,
+};
+
+export const tagBackgroundBlue = {
+  whiteTheme: blue20,
+  g10: blue20,
+  g90: blue70,
+  g100: blue70,
+};
+
+export const tagColorBlue = {
+  whiteTheme: blue80,
+  g10: blue80,
+  g90: blue20,
+  g100: blue20,
+};
+
+export const tagHoverBlue = {
+  whiteTheme: blue30,
+  g10: blue30,
+  g90: blue70Hover,
+  g100: blue70Hover,
+};
+
+export const tagBackgroundCyan = {
+  whiteTheme: cyan20,
+  g10: cyan20,
+  g90: cyan70,
+  g100: cyan70,
+};
+
+export const tagColorCyan = {
+  whiteTheme: cyan80,
+  g10: cyan80,
+  g90: cyan20,
+  g100: cyan20,
+};
+
+export const tagHoverCyan = {
+  whiteTheme: cyan30,
+  g10: cyan30,
+  g90: cyan70Hover,
+  g100: cyan70Hover,
+};
+export const tagBackgroundTeal = {
+  whiteTheme: teal20,
+  g10: teal20,
+  g90: teal70,
+  g100: teal70,
+};
+export const tagColorTeal = {
+  whiteTheme: teal80,
+  g10: teal80,
+  g90: teal20,
+  g100: teal20,
+};
+
+export const tagHoverTeal = {
+  whiteTheme: teal30,
+  g10: teal30,
+  g90: teal70Hover,
+  g100: teal70Hover,
+};
+
+export const tagBackgroundGreen = {
+  whiteTheme: green20,
+  g10: green20,
+  g90: green70,
+  g100: green70,
+};
+
+export const tagColorGreen = {
+  whiteTheme: green80,
+  g10: green80,
+  g90: green20,
+  g100: green20,
+};
+
+export const tagHoverGreen = {
+  whiteTheme: green30,
+  g10: green30,
+  g90: green70Hover,
+  g100: green70Hover,
+};
+
+export const tagBackgroundGray = {
+  whiteTheme: gray20,
+  g10: gray20,
+  g90: gray70,
+  g100: gray70,
+};
+
+export const tagColorGray = {
+  whiteTheme: gray80,
+  g10: gray80,
+  g90: gray20,
+  g100: gray20,
+};
+
+export const tagHoverGray = {
+  whiteTheme: gray30,
+  g10: gray30,
+  g90: gray70Hover,
+  g100: gray70Hover,
+};
+
+export const tagBackgroundCoolGray = {
+  whiteTheme: coolGray20,
+  g10: coolGray20,
+  g90: coolGray70,
+  g100: coolGray70,
+};
+
+export const tagColorCoolGray = {
+  whiteTheme: coolGray80,
+  g10: coolGray80,
+  g90: coolGray20,
+  g100: coolGray20,
+};
+
+export const tagHoverCoolGray = {
+  whiteTheme: coolGray30,
+  g10: coolGray30,
+  g90: coolGray70Hover,
+  g100: coolGray70Hover,
+};
+
+export const tagBackgroundWarmGray = {
+  whiteTheme: warmGray20,
+  g10: warmGray20,
+  g90: warmGray70,
+  g100: warmGray70,
+};
+
+export const tagColorWarmGray = {
+  whiteTheme: warmGray80,
+  g10: warmGray80,
+  g90: warmGray20,
+  g100: warmGray20,
+};
+
+export const tagHoverWarmGray = {
+  whiteTheme: warmGray30,
+  g10: warmGray30,
+  g90: warmGray70Hover,
+  g100: warmGray70Hover,
+};
diff --git a/packages/themes/src/index.js b/packages/themes/src/index.js
index 7f074166d8a0..f38d256b5f95 100644
--- a/packages/themes/src/index.js
+++ b/packages/themes/src/index.js
@@ -11,6 +11,7 @@ import * as g90 from './g90';
 import * as g100 from './g100';
 import * as v10 from './v10';
 import * as buttonTokens from './component-tokens/button';
+import * as tagTokens from './component-tokens/tag';
 import { formatTokenName } from './tools';
 import { unstable_metadata } from './tokens';
 
@@ -30,6 +31,7 @@ export {
   themes,
   v10,
   buttonTokens,
+  tagTokens,
   unstable_metadata,
   formatTokenName,
 };
diff --git a/packages/themes/tasks/build.js b/packages/themes/tasks/build.js
index fd5bea6261b3..c95704b21cad 100644
--- a/packages/themes/tasks/build.js
+++ b/packages/themes/tasks/build.js
@@ -18,6 +18,7 @@ const buildCompatTokensFile = require('./builders/compat/tokens');
 const buildModulesThemesFile = require('./builders/modules-themes');
 const buildModulesTokensFile = require('./builders/modules-tokens');
 const buildModulesButtonTokens = require('./builders/modules-button-tokens');
+const buildModulesTagTokens = require('./builders/modules-tag-tokens');
 
 async function build() {
   reporter.info('Building scss files for themes...');
@@ -55,6 +56,12 @@ async function build() {
         return buildModulesButtonTokens();
       },
     },
+    {
+      filepath: path.join(GENERATED_SCSS_DIR, '_tag-tokens.scss'),
+      builder() {
+        return buildModulesTagTokens();
+      },
+    },
   ];
 
   for (const { filepath, builder } of files) {
diff --git a/packages/themes/tasks/builders/modules-tag-tokens.js b/packages/themes/tasks/builders/modules-tag-tokens.js
new file mode 100644
index 000000000000..c2fef909797f
--- /dev/null
+++ b/packages/themes/tasks/builders/modules-tag-tokens.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright IBM Corp. 2015, 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 strict';
+
+const { types: t } = require('@carbon/scss-generator');
+const { TokenFormat } = require('../../src/tokens');
+const { tagTokens } = require('../../src/component-tokens/tag');
+const { FILE_BANNER, primitive } = require('./shared');
+const { paramCase } = require('change-case');
+
+function buildThemesFile() {
+  const imports = [t.SassModule('sass:map')];
+
+  const variables = Object.entries(tagTokens).flatMap(([key, tagToken]) => {
+    return [
+      t.Newline(),
+      t.Assignment({
+        id: t.Identifier(paramCase(key)),
+        init: t.SassMap({
+          properties: Object.entries(tagToken).map(([token, value]) => {
+            const id = TokenFormat.convert({
+              name: token,
+              format: TokenFormat.formats.scss,
+            });
+            return t.SassMapProperty(t.Identifier(id), primitive(value));
+          }),
+        }),
+        default: true,
+      }),
+    ];
+  });
+
+  return t.StyleSheet([FILE_BANNER, t.Newline(), ...imports, ...variables]);
+}
+
+module.exports = buildThemesFile;