From fd71cc6a5837a86ea3030ace1d15b12c03397b3e Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Tue, 14 Sep 2021 16:50:39 -0500
Subject: [PATCH 1/2] feat(styles): add component tokens to button, tag

---
 packages/carbon-react/.storybook/styles.scss  |    8 +-
 .../styles/scss/components/button/_index.scss |    4 +
 .../scss/components/button/_tokens.scss       |  472 +++++-
 .../styles/scss/components/tag/_index.scss    |    4 +
 .../styles/scss/components/tag/_tokens.scss   | 1367 +++++++++--------
 5 files changed, 1169 insertions(+), 686 deletions(-)

diff --git a/packages/carbon-react/.storybook/styles.scss b/packages/carbon-react/.storybook/styles.scss
index 23207583f534..f3291663c7db 100644
--- a/packages/carbon-react/.storybook/styles.scss
+++ b/packages/carbon-react/.storybook/styles.scss
@@ -13,19 +13,19 @@
 @use '../scss/components/tag';
 
 :root {
-  @include styles.theme(styles.$white, button.$white, tag.$white);
+  @include styles.theme(styles.$white);
 }
 
 [data-carbon-theme='g10'] {
-  @include styles.theme(styles.$g10, button.$g10, tag.$g10);
+  @include styles.theme(styles.$g10);
 }
 
 [data-carbon-theme='g90'] {
-  @include styles.theme(styles.$g90, button.$g90, tag.$g90);
+  @include styles.theme(styles.$g90);
 }
 
 [data-carbon-theme='g100'] {
-  @include styles.theme(styles.$g100, button.$g100, tag.$g100);
+  @include styles.theme(styles.$g100);
 }
 
 body {
diff --git a/packages/styles/scss/components/button/_index.scss b/packages/styles/scss/components/button/_index.scss
index 86439bfd53e1..d6b34fe0df76 100644
--- a/packages/styles/scss/components/button/_index.scss
+++ b/packages/styles/scss/components/button/_index.scss
@@ -8,6 +8,10 @@
 @forward 'vars';
 @forward 'button';
 @forward 'tokens';
+
+@use '../../theme';
 @use 'button';
+@use 'tokens';
 
+@include theme.add-component-tokens(tokens.$button-tokens);
 @include button.button;
diff --git a/packages/styles/scss/components/button/_tokens.scss b/packages/styles/scss/components/button/_tokens.scss
index 02c8bab65292..8b25345941ea 100644
--- a/packages/styles/scss/components/button/_tokens.scss
+++ b/packages/styles/scss/components/button/_tokens.scss
@@ -6,71 +6,419 @@
 //
 
 @use 'sass:map';
-@use '../../theme' as *;
-@use '../../utilities/custom-property';
-
-$white: (
-  button-separator: #e0e0e0,
-  button-primary: #0f62fe,
-  button-secondary: #393939,
-  button-tertiary: #0f62fe,
-  button-danger-primary: #da1e28,
-  button-danger-secondary: #da1e28,
-  button-danger-active: #750e13,
-  button-primary-active: #002d9c,
-  button-secondary-active: #6f6f6f,
-  button-tertiary-active: #002d9c,
-  button-danger-hover: #b81921,
-  button-primary-hover: #0353e9,
-  button-secondary-hover: #4c4c4c,
-  button-tertiary-hover: #0353e9,
-  button-disabled: #c6c6c6,
+@use '../../themes';
+@use '../../utilities/component-tokens';
+
+$button-separator: (
+  fallback: #e0e0e0,
+  values: (
+    (
+      theme: themes.$white,
+      value: #e0e0e0,
+    ),
+    (
+      theme: themes.$g10,
+      value: #e0e0e0,
+    ),
+    (
+      theme: themes.$g90,
+      value: #161616,
+    ),
+    (
+      theme: themes.$g100,
+      value: #161616,
+    ),
+  ),
+) !default;
+
+$button-primary: (
+  fallback: #0f62fe,
+  values: (
+    (
+      theme: themes.$white,
+      value: #0f62fe,
+    ),
+    (
+      theme: themes.$g10,
+      value: #0f62fe,
+    ),
+    (
+      theme: themes.$g90,
+      value: #0f62fe,
+    ),
+    (
+      theme: themes.$g100,
+      value: #0f62fe,
+    ),
+  ),
+) !default;
+
+$button-secondary: (
+  fallback: #393939,
+  values: (
+    (
+      theme: themes.$white,
+      value: #393939,
+    ),
+    (
+      theme: themes.$g10,
+      value: #6f6f6f,
+    ),
+    (
+      theme: themes.$g90,
+      value: #393939,
+    ),
+    (
+      theme: themes.$g100,
+      value: #6f6f6f,
+    ),
+  ),
+) !default;
+
+$button-tertiary: (
+  fallback: #0f62fe,
+  values: (
+    (
+      theme: themes.$white,
+      value: #0f62fe,
+    ),
+    (
+      theme: themes.$g10,
+      value: #0f62fe,
+    ),
+    (
+      theme: themes.$g90,
+      value: #ffffff,
+    ),
+    (
+      theme: themes.$g100,
+      value: #ffffff,
+    ),
+  ),
+) !default;
+
+$button-danger-primary: (
+  fallback: #da1e28,
+  values: (
+    (
+      theme: themes.$white,
+      value: #da1e28,
+    ),
+    (
+      theme: themes.$g10,
+      value: #da1e28,
+    ),
+    (
+      theme: themes.$g90,
+      value: #da1e28,
+    ),
+    (
+      theme: themes.$g100,
+      value: #da1e28,
+    ),
+  ),
+) !default;
+
+$button-danger-secondary: (
+  fallback: #da1e28,
+  values: (
+    (
+      theme: themes.$white,
+      value: #da1e28,
+    ),
+    (
+      theme: themes.$g10,
+      value: #da1e28,
+    ),
+    (
+      theme: themes.$g90,
+      value: #ff8389,
+    ),
+    (
+      theme: themes.$g100,
+      value: #fa4d56,
+    ),
+  ),
+) !default;
+
+$button-danger-active: (
+  fallback: #750e13,
+  values: (
+    (
+      theme: themes.$white,
+      value: #750e13,
+    ),
+    (
+      theme: themes.$g10,
+      value: #750e13,
+    ),
+    (
+      theme: themes.$g90,
+      value: #750e13,
+    ),
+    (
+      theme: themes.$g100,
+      value: #750e13,
+    ),
+  ),
+) !default;
+
+$button-primary-active: (
+  fallback: #002d9c,
+  values: (
+    (
+      theme: themes.$white,
+      value: #002d9c,
+    ),
+    (
+      theme: themes.$g10,
+      value: #002d9c,
+    ),
+    (
+      theme: themes.$g90,
+      value: #002d9c,
+    ),
+    (
+      theme: themes.$g100,
+      value: #002d9c,
+    ),
+  ),
+) !default;
+
+$button-secondary-active: (
+  fallback: #6f6f6f,
+  values: (
+    (
+      theme: themes.$white,
+      value: #6f6f6f,
+    ),
+    (
+      theme: themes.$g10,
+      value: #6f6f6f,
+    ),
+    (
+      theme: themes.$g90,
+      value: #393939,
+    ),
+    (
+      theme: themes.$g100,
+      value: #393939,
+    ),
+  ),
+) !default;
+
+$button-tertiary-active: (
+  fallback: #002d9c,
+  values: (
+    (
+      theme: themes.$white,
+      value: #002d9c,
+    ),
+    (
+      theme: themes.$g10,
+      value: #002d9c,
+    ),
+    (
+      theme: themes.$g90,
+      value: #c6c6c6,
+    ),
+    (
+      theme: themes.$g100,
+      value: #c6c6c6,
+    ),
+  ),
+) !default;
+
+$button-danger-hover: (
+  fallback: #b81921,
+  values: (
+    (
+      theme: themes.$white,
+      value: #b81921,
+    ),
+    (
+      theme: themes.$g10,
+      value: #b81921,
+    ),
+    (
+      theme: themes.$g90,
+      value: #b81921,
+    ),
+    (
+      theme: themes.$g100,
+      value: #b81921,
+    ),
+  ),
+) !default;
+
+$button-primary-hover: (
+  fallback: #0353e9,
+  values: (
+    (
+      theme: themes.$white,
+      value: #0353e9,
+    ),
+    (
+      theme: themes.$g10,
+      value: #0353e9,
+    ),
+    (
+      theme: themes.$g90,
+      value: #0353e9,
+    ),
+    (
+      theme: themes.$g100,
+      value: #0353e9,
+    ),
+  ),
+) !default;
+
+$button-secondary-hover: (
+  fallback: #4c4c4c,
+  values: (
+    (
+      theme: themes.$white,
+      value: #4c4c4c,
+    ),
+    (
+      theme: themes.$g10,
+      value: #4c4c4c,
+    ),
+    (
+      theme: themes.$g90,
+      value: #606060,
+    ),
+    (
+      theme: themes.$g100,
+      value: #606060,
+    ),
+  ),
+) !default;
+
+$button-tertiary-hover: (
+  fallback: #0353e9,
+  values: (
+    (
+      theme: themes.$white,
+      value: #0353e9,
+    ),
+    (
+      theme: themes.$g10,
+      value: #0353e9,
+    ),
+    (
+      theme: themes.$g90,
+      value: #f4f4f4,
+    ),
+    (
+      theme: themes.$g100,
+      value: #f4f4f4,
+    ),
+  ),
+) !default;
+
+$button-disabled: (
+  fallback: #c6c6c6,
+  values: (
+    (
+      theme: themes.$white,
+      value: #c6c6c6,
+    ),
+    (
+      theme: themes.$g10,
+      value: #c6c6c6,
+    ),
+    (
+      theme: themes.$g90,
+      value: #6f6f6f,
+    ),
+    (
+      theme: themes.$g100,
+      value: #525252,
+    ),
+  ),
+) !default;
+
+$button-tokens: (
+  button-separator: $button-separator,
+  button-primary: $button-primary,
+  button-secondary: $button-secondary,
+  button-tertiary: $button-tertiary,
+  button-danger-primary: $button-danger-primary,
+  button-danger-secondary: $button-danger-secondary,
+  button-danger-active: $button-danger-active,
+  button-primary-active: $button-primary-active,
+  button-secondary-active: $button-secondary-active,
+  button-tertiary-active: $button-tertiary-active,
+  button-danger-hover: $button-danger-hover,
+  button-primary-hover: $button-primary-hover,
+  button-secondary-hover: $button-secondary-hover,
+  button-tertiary-hover: $button-tertiary-hover,
+  button-disabled: $button-disabled,
+);
+
+$button-separator: component-tokens.get-var(
+  $button-separator,
+  'button-separator'
+);
+
+$button-primary: component-tokens.get-var($button-primary, 'button-primary');
+
+$button-secondary: component-tokens.get-var(
+  $button-secondary,
+  'button-secondary'
+);
+
+$button-tertiary: component-tokens.get-var($button-tertiary, 'button-tertiary');
+
+$button-danger-primary: component-tokens.get-var(
+  $button-danger-primary,
+  'button-danger-primary'
+);
+
+$button-danger-secondary: component-tokens.get-var(
+  $button-danger-secondary,
+  'button-danger-secondary'
+);
+
+$button-danger-active: component-tokens.get-var(
+  $button-danger-active,
+  'button-danger-active'
+);
+
+$button-primary-active: component-tokens.get-var(
+  $button-primary-active,
+  'button-primary-active'
+);
+
+$button-secondary-active: component-tokens.get-var(
+  $button-secondary-active,
+  'button-secondary-active'
+);
+
+$button-tertiary-active: component-tokens.get-var(
+  $button-tertiary-active,
+  'button-tertiary-active'
+);
+
+$button-danger-hover: component-tokens.get-var(
+  $button-danger-hover,
+  'button-danger-hover'
+);
+
+$button-primary-hover: component-tokens.get-var(
+  $button-primary-hover,
+  'button-primary-hover'
 );
 
-$g10: $white;
-
-$g90: map.merge(
-  $white,
-  (
-    button-separator: #161616,
-    button-secondary: #6f6f6f,
-    button-tertiary: #ffffff,
-    button-danger-secondary: #ff8389,
-    button-secondary-active: #393939,
-    button-tertiary-active: #c6c6c6,
-    button-secondary-hover: #606060,
-    button-tertiary-hover: #f4f4f4,
-    button-disabled: #6f6f6f,
-  )
+$button-secondary-hover: component-tokens.get-var(
+  $button-secondary-hover,
+  'button-secondary-hover'
 );
 
-$g100: map.merge(
-  $white,
-  (
-    button-separator: #161616,
-    button-secondary: #6f6f6f,
-    button-tertiary: #ffffff,
-    button-danger-secondary: #fa4d56,
-    button-secondary-active: #393939,
-    button-tertiary-active: #c6c6c6,
-    button-secondary-hover: #606060,
-    button-tertiary-hover: #f4f4f4,
-    button-disabled: #525252,
-  )
+$button-tertiary-hover: component-tokens.get-var(
+  $button-tertiary-hover,
+  'button-tertiary-hover'
 );
 
-$button-separator: custom-property.get-var('button-separator');
-$button-primary: custom-property.get-var('button-primary');
-$button-secondary: custom-property.get-var('button-secondary');
-$button-tertiary: custom-property.get-var('button-tertiary');
-$button-danger-primary: custom-property.get-var('button-danger-primary');
-$button-danger-secondary: custom-property.get-var('button-danger-secondary');
-$button-danger-active: custom-property.get-var('button-danger-active');
-$button-primary-active: custom-property.get-var('button-primary-active');
-$button-secondary-active: custom-property.get-var('button-secondary-active');
-$button-tertiary-active: custom-property.get-var('button-tertiary-active');
-$button-danger-hover: custom-property.get-var('button-danger-hover');
-$button-primary-hover: custom-property.get-var('button-primary-hover');
-$button-secondary-hover: custom-property.get-var('button-secondary-hover');
-$button-tertiary-hover: custom-property.get-var('button-tertiary-hover');
-$button-disabled: custom-property.get-var('button-disabled');
+$button-disabled: component-tokens.get-var($button-disabled, 'button-disabled');
diff --git a/packages/styles/scss/components/tag/_index.scss b/packages/styles/scss/components/tag/_index.scss
index 30e0fc791dbd..38e104be8600 100644
--- a/packages/styles/scss/components/tag/_index.scss
+++ b/packages/styles/scss/components/tag/_index.scss
@@ -7,6 +7,10 @@
 
 @forward 'tag';
 @forward 'tokens';
+
+@use '../../theme';
 @use 'tag';
+@use 'tokens';
 
+@include theme.add-component-tokens(tokens.$tag-tokens);
 @include tag.tag;
diff --git a/packages/styles/scss/components/tag/_tokens.scss b/packages/styles/scss/components/tag/_tokens.scss
index af569318c252..c3fbff4c4f09 100644
--- a/packages/styles/scss/components/tag/_tokens.scss
+++ b/packages/styles/scss/components/tag/_tokens.scss
@@ -7,696 +7,823 @@
 
 @use 'sass:color';
 @use '../../colors';
-@use '../../theme' as *;
 @use '../../themes';
+@use '../../theme' as *;
 @use '../../utilities/component-tokens';
-@use '../../utilities/custom-property';
-
-// prettier-ignore
-$-tokens: (
-  // red
-  'tag-background-red': (
-    fallback: colors.$red-20,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$red-20,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$red-20,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$red-80,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$red-80,
-      ),
+
+// red
+$tag-background-red: (
+  fallback: colors.$red-20,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$red-20,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$red-20,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$red-80,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$red-80,
     ),
   ),
-  'tag-color-red': (
-    fallback: colors.$red-80,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$red-80,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$red-80,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$red-30,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$red-30,
-      ),
+) !default;
+
+$tag-color-red: (
+  fallback: colors.$red-80,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$red-80,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$red-80,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$red-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$red-30,
     ),
   ),
-  'tag-hover-red': (
-    fallback: colors.$red-30,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$red-30,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$red-30,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$red-70,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$red-70,
-      ),
+) !default;
+
+$tag-hover-red: (
+  fallback: colors.$red-30,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$red-30,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$red-30,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$red-70,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$red-70,
     ),
   ),
+) !default;
 
-  // magenta
-  'tag-background-magenta': (
-    fallback: colors.$magenta-20,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$magenta-20,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$magenta-20,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$magenta-80,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$magenta-80,
-      ),
+// magenta
+$tag-background-magenta: (
+  fallback: colors.$magenta-20,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$magenta-20,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$magenta-20,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$magenta-80,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$magenta-80,
     ),
   ),
-  'tag-color-magenta': (
-    fallback: colors.$magenta-80,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$magenta-80,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$magenta-80,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$magenta-30,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$magenta-30,
-      ),
+) !default;
+
+$tag-color-magenta: (
+  fallback: colors.$magenta-80,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$magenta-80,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$magenta-80,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$magenta-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$magenta-30,
     ),
   ),
-  'tag-hover-magenta': (
-    fallback: colors.$magenta-30,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$magenta-30,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$magenta-30,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$magenta-70,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$magenta-70,
-      ),
+) !default;
+
+$tag-hover-magenta: (
+  fallback: colors.$magenta-30,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$magenta-30,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$magenta-30,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$magenta-70,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$magenta-70,
     ),
   ),
+) !default;
 
-  // purple
-  'tag-background-purple': (
-    fallback: colors.$purple-20,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$purple-20,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$purple-20,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$purple-80,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$purple-80,
-      ),
+// purple
+$tag-background-purple: (
+  fallback: colors.$purple-20,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$purple-20,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$purple-20,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$purple-80,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$purple-80,
     ),
   ),
-  'tag-color-purple': (
-    fallback: colors.$purple-80,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$purple-80,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$purple-80,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$purple-30,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$purple-30,
-      ),
+) !default;
+
+$tag-color-purple: (
+  fallback: colors.$purple-80,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$purple-80,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$purple-80,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$purple-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$purple-30,
     ),
   ),
-  'tag-hover-purple': (
-    fallback: colors.$purple-30,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$purple-30,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$purple-30,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$purple-70,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$purple-70,
-      ),
+) !default;
+
+$tag-hover-purple: (
+  fallback: colors.$purple-30,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$purple-30,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$purple-30,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$purple-70,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$purple-70,
     ),
   ),
+) !default;
 
-  // blue
-  'tag-background-blue': (
-    fallback: colors.$blue-20,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$blue-20,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$blue-20,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$blue-80,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$blue-80,
-      ),
+// blue
+$tag-background-blue: (
+  fallback: colors.$blue-20,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$blue-20,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$blue-20,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$blue-80,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$blue-80,
     ),
   ),
-  'tag-color-blue': (
-    fallback: colors.$blue-80,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$blue-80,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$blue-80,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$blue-30,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$blue-30,
-      ),
+) !default;
+
+$tag-color-blue: (
+  fallback: colors.$blue-80,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$blue-80,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$blue-80,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$blue-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$blue-30,
     ),
   ),
-  'tag-hover-blue': (
-    fallback: colors.$blue-30,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$blue-30,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$blue-30,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$blue-70,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$blue-70,
-      ),
+) !default;
+
+$tag-hover-blue: (
+  fallback: colors.$blue-30,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$blue-30,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$blue-30,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$blue-70,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$blue-70,
     ),
   ),
+) !default;
 
-  // cyan
-  'tag-background-cyan': (
-    fallback: colors.$cyan-20,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$cyan-20,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$cyan-20,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$cyan-80,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$cyan-80,
-      ),
+// cyan
+$tag-background-cyan: (
+  fallback: colors.$cyan-20,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$cyan-20,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$cyan-20,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$cyan-80,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$cyan-80,
     ),
   ),
-  'tag-color-cyan': (
-    fallback: colors.$cyan-80,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$cyan-80,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$cyan-80,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$cyan-30,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$cyan-30,
-      ),
+) !default;
+
+$tag-color-cyan: (
+  fallback: colors.$cyan-80,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$cyan-80,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$cyan-80,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$cyan-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$cyan-30,
     ),
   ),
-  'tag-hover-cyan': (
-    fallback: colors.$cyan-30,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$cyan-30,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$cyan-30,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$cyan-70,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$cyan-70,
-      ),
+) !default;
+
+$tag-hover-cyan: (
+  fallback: colors.$cyan-30,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$cyan-30,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$cyan-30,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$cyan-70,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$cyan-70,
     ),
   ),
+) !default;
 
-  // teal
-  'tag-background-teal': (
-    fallback: colors.$teal-20,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$teal-20,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$teal-20,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$teal-80,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$teal-80,
-      ),
+// teal
+$tag-background-teal: (
+  fallback: colors.$teal-20,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$teal-20,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$teal-20,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$teal-80,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$teal-80,
     ),
   ),
-  'tag-color-teal': (
-    fallback: colors.$teal-80,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$teal-80,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$teal-80,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$teal-30,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$teal-30,
-      ),
+) !default;
+
+$tag-color-teal: (
+  fallback: colors.$teal-80,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$teal-80,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$teal-80,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$teal-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$teal-30,
     ),
   ),
-  'tag-hover-teal': (
-    fallback: colors.$teal-30,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$teal-30,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$teal-30,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$teal-70,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$teal-70,
-      ),
+) !default;
+
+$tag-hover-teal: (
+  fallback: colors.$teal-30,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$teal-30,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$teal-30,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$teal-70,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$teal-70,
     ),
   ),
+) !default;
 
-  // green
-  'tag-background-green': (
-    fallback: colors.$green-20,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$green-20,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$green-20,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$green-80,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$green-80,
-      ),
+// green
+$tag-background-green: (
+  fallback: colors.$green-20,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$green-20,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$green-20,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$green-80,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$green-80,
     ),
   ),
-  'tag-color-green': (
-    fallback: colors.$green-80,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$green-80,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$green-80,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$green-30,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$green-30,
-      ),
+) !default;
+
+$tag-color-green: (
+  fallback: colors.$green-80,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$green-80,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$green-80,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$green-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$green-30,
     ),
   ),
-  'tag-hover-green': (
-    fallback: colors.$green-30,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$green-30,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$green-30,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$green-70,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$green-70,
-      ),
+) !default;
+
+$tag-hover-green: (
+  fallback: colors.$green-30,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$green-30,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$green-30,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$green-70,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$green-70,
     ),
   ),
+) !default;
 
-  // gray
-  'tag-background-gray': (
-    fallback: colors.$gray-20,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$gray-20,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$gray-20,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$gray-80,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$gray-80,
-      ),
+// gray
+$tag-background-gray: (
+  fallback: colors.$gray-20,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$gray-20,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$gray-20,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$gray-80,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$gray-80,
     ),
   ),
-  'tag-color-gray': (
-    fallback: colors.$gray-80,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$gray-80,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$gray-80,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$gray-30,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$gray-30,
-      ),
+) !default;
+
+$tag-color-gray: (
+  fallback: colors.$gray-80,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$gray-80,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$gray-80,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$gray-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$gray-30,
     ),
   ),
-  'tag-hover-gray': (
-    fallback: colors.$gray-30,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$gray-30,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$gray-30,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$gray-70,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$gray-70,
-      ),
+) !default;
+
+$tag-hover-gray: (
+  fallback: colors.$gray-30,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$gray-30,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$gray-30,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$gray-70,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$gray-70,
     ),
   ),
+) !default;
 
-  // cool-gray
-  'tag-background-cool-gray': (
-    fallback: colors.$cool-gray-20,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$cool-gray-20,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$cool-gray-20,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$cool-gray-80,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$cool-gray-80,
-      ),
+// cool-gray
+$tag-background-cool-gray: (
+  fallback: colors.$cool-gray-20,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$cool-gray-20,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$cool-gray-20,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$cool-gray-80,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$cool-gray-80,
     ),
   ),
-  'tag-color-cool-gray': (
-    fallback: colors.$cool-gray-80,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$cool-gray-80,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$cool-gray-80,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$cool-gray-30,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$cool-gray-30,
-      ),
+) !default;
+
+$tag-color-cool-gray: (
+  fallback: colors.$cool-gray-80,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$cool-gray-80,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$cool-gray-80,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$cool-gray-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$cool-gray-30,
     ),
   ),
-  'tag-hover-cool-gray': (
-    fallback: colors.$cool-gray-30,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$cool-gray-30,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$cool-gray-30,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$cool-gray-70,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$cool-gray-70,
-      ),
+) !default;
+
+$tag-hover-cool-gray: (
+  fallback: colors.$cool-gray-30,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$cool-gray-30,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$cool-gray-30,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$cool-gray-70,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$cool-gray-70,
     ),
   ),
+) !default;
 
-  // warm-gray
-  'tag-background-warm-gray': (
-    fallback: colors.$warm-gray-20,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$warm-gray-20,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$warm-gray-20,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$warm-gray-80,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$warm-gray-80,
-      ),
+// warm-gray
+$tag-background-warm-gray: (
+  fallback: colors.$warm-gray-20,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$warm-gray-20,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$warm-gray-20,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$warm-gray-80,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$warm-gray-80,
     ),
   ),
-  'tag-color-warm-gray': (
-    fallback: colors.$warm-gray-80,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$warm-gray-80,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$warm-gray-80,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$warm-gray-30,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$warm-gray-30,
-      ),
+) !default;
+
+$tag-color-warm-gray: (
+  fallback: colors.$warm-gray-80,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$warm-gray-80,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$warm-gray-80,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$warm-gray-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$warm-gray-30,
     ),
   ),
-  'tag-hover-warm-gray': (
-    fallback: colors.$warm-gray-30,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$warm-gray-30,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$warm-gray-30,
-      ),
-      (
-        theme: themes.$g90,
-        value: colors.$warm-gray-70,
-      ),
-      (
-        theme: themes.$g100,
-        value: colors.$warm-gray-70,
-      ),
+) !default;
+
+$tag-hover-warm-gray: (
+  fallback: colors.$warm-gray-30,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$warm-gray-30,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$warm-gray-30,
+    ),
+    (
+      theme: themes.$g90,
+      value: colors.$warm-gray-70,
+    ),
+    (
+      theme: themes.$g100,
+      value: colors.$warm-gray-70,
     ),
   ),
+) !default;
+
+$tag-tokens: (
+  tag-background-red: $tag-background-red,
+  tag-color-red: $tag-color-red,
+  tag-hover-red: $tag-hover-red,
+  tag-background-magenta: $tag-background-magenta,
+  tag-color-magenta: $tag-color-magenta,
+  tag-hover-magenta: $tag-hover-magenta,
+  tag-background-purple: $tag-background-purple,
+  tag-color-purple: $tag-color-purple,
+  tag-hover-purple: $tag-hover-purple,
+  tag-background-blue: $tag-background-blue,
+  tag-color-blue: $tag-color-blue,
+  tag-hover-blue: $tag-hover-blue,
+  tag-background-cyan: $tag-background-cyan,
+  tag-color-cyan: $tag-color-cyan,
+  tag-hover-cyan: $tag-hover-cyan,
+  tag-background-teal: $tag-background-teal,
+  tag-color-teal: $tag-color-teal,
+  tag-hover-teal: $tag-hover-teal,
+  tag-background-green: $tag-background-green,
+  tag-color-green: $tag-color-green,
+  tag-hover-green: $tag-hover-green,
+  tag-background-gray: $tag-background-gray,
+  tag-color-gray: $tag-color-gray,
+  tag-hover-gray: $tag-hover-gray,
+  tag-background-cool-gray: $tag-background-cool-gray,
+  tag-color-cool-gray: $tag-color-cool-gray,
+  tag-hover-cool-gray: $tag-hover-cool-gray,
+  tag-background-warm-gray: $tag-background-warm-gray,
+  tag-color-warm-gray: $tag-color-warm-gray,
+  tag-hover-warm-gray: $tag-hover-warm-gray,
+);
+
+$tag-background-red: component-tokens.get-var(
+  $tag-background-red,
+  'tag-background-red'
+);
+
+$tag-color-red: component-tokens.get-var($tag-color-red, 'tag-color-red');
+
+$tag-hover-red: component-tokens.get-var($tag-hover-red, 'tag-hover-red');
+
+$tag-background-magenta: component-tokens.get-var(
+  $tag-background-magenta,
+  'tag-background-magenta'
+);
+
+$tag-color-magenta: component-tokens.get-var(
+  $tag-color-magenta,
+  'tag-color-magenta'
+);
+
+$tag-hover-magenta: component-tokens.get-var(
+  $tag-hover-magenta,
+  'tag-hover-magenta'
+);
+
+$tag-background-purple: component-tokens.get-var(
+  $tag-background-purple,
+  'tag-background-purple'
+);
+
+$tag-color-purple: component-tokens.get-var(
+  $tag-color-purple,
+  'tag-color-purple'
+);
+
+$tag-hover-purple: component-tokens.get-var(
+  $tag-hover-purple,
+  'tag-hover-purple'
+);
+
+$tag-background-blue: component-tokens.get-var(
+  $tag-background-blue,
+  'tag-background-blue'
+);
+
+$tag-color-blue: component-tokens.get-var($tag-color-blue, 'tag-color-blue');
+
+$tag-hover-blue: component-tokens.get-var($tag-hover-blue, 'tag-hover-blue');
+
+$tag-background-cyan: component-tokens.get-var(
+  $tag-background-cyan,
+  'tag-background-cyan'
+);
+
+$tag-color-cyan: component-tokens.get-var($tag-color-cyan, 'tag-color-cyan');
+
+$tag-hover-cyan: component-tokens.get-var($tag-hover-cyan, 'tag-hover-cyan');
+
+$tag-background-teal: component-tokens.get-var(
+  $tag-background-teal,
+  'tag-background-teal'
+);
+
+$tag-color-teal: component-tokens.get-var($tag-color-teal, 'tag-color-teal');
+
+$tag-hover-teal: component-tokens.get-var($tag-hover-teal, 'tag-hover-teal');
+
+$tag-background-green: component-tokens.get-var(
+  $tag-background-green,
+  'tag-background-green'
+);
+
+$tag-color-green: component-tokens.get-var($tag-color-green, 'tag-color-green');
+
+$tag-hover-green: component-tokens.get-var($tag-hover-green, 'tag-hover-green');
+
+$tag-background-gray: component-tokens.get-var(
+  $tag-background-gray,
+  'tag-background-gray'
+);
+
+$tag-color-gray: component-tokens.get-var($tag-color-gray, 'tag-color-gray');
+
+$tag-hover-gray: component-tokens.get-var($tag-hover-gray, 'tag-hover-gray');
+
+$tag-background-cool-gray: component-tokens.get-var(
+  $tag-background-cool-gray,
+  'tag-background-cool-gray'
+);
+
+$tag-color-cool-gray: component-tokens.get-var(
+  $tag-color-cool-gray,
+  'tag-color-cool-gray'
+);
+
+$tag-hover-cool-gray: component-tokens.get-var(
+  $tag-hover-cool-gray,
+  'tag-hover-cool-gray'
 );
 
-$tag-background-red: custom-property.get-var('tag-background-red');
-$tag-color-red: custom-property.get-var('tag-color-red');
-$tag-hover-red: custom-property.get-var('tag-hover-red');
-$tag-background-magenta: custom-property.get-var('tag-background-magenta');
-$tag-color-magenta: custom-property.get-var('tag-color-magenta');
-$tag-hover-magenta: custom-property.get-var('tag-hover-magenta');
-$tag-background-purple: custom-property.get-var('tag-background-purple');
-$tag-color-purple: custom-property.get-var('tag-color-purple');
-$tag-hover-purple: custom-property.get-var('tag-hover-purple');
-$tag-background-blue: custom-property.get-var('tag-background-blue');
-$tag-color-blue: custom-property.get-var('tag-color-blue');
-$tag-hover-blue: custom-property.get-var('tag-hover-blue');
-$tag-background-cyan: custom-property.get-var('tag-background-cyan');
-$tag-color-cyan: custom-property.get-var('tag-color-cyan');
-$tag-hover-cyan: custom-property.get-var('tag-hover-cyan');
-$tag-background-teal: custom-property.get-var('tag-background-teal');
-$tag-color-teal: custom-property.get-var('tag-color-teal');
-$tag-hover-teal: custom-property.get-var('tag-hover-teal');
-$tag-background-green: custom-property.get-var('tag-background-green');
-$tag-color-green: custom-property.get-var('tag-color-green');
-$tag-hover-green: custom-property.get-var('tag-hover-green');
-$tag-background-gray: custom-property.get-var('tag-background-gray');
-$tag-color-gray: custom-property.get-var('tag-color-gray');
-$tag-hover-gray: custom-property.get-var('tag-hover-gray');
-$tag-background-cool-gray: custom-property.get-var('tag-background-cool-gray');
-$tag-color-cool-gray: custom-property.get-var('tag-color-cool-gray');
-$tag-hover-cool-gray: custom-property.get-var('tag-color-cool-gray');
-$tag-background-warm-gray: custom-property.get-var('tag-background-warm-gray');
-$tag-color-warm-gray: custom-property.get-var('tag-color-warm-gray');
-$tag-hover-warm-gray: custom-property.get-var('tag-hover-warm-gray');
-
-$white: component-tokens.get-tokens($-tokens, themes.$white);
-$g10: component-tokens.get-tokens($-tokens, themes.$g10);
-$g90: component-tokens.get-tokens($-tokens, themes.$g90);
-$g100: component-tokens.get-tokens($-tokens, themes.$g100);
+$tag-background-warm-gray: component-tokens.get-var(
+  $tag-background-warm-gray,
+  'tag-background-warm-gray'
+);
+
+$tag-color-warm-gray: component-tokens.get-var(
+  $tag-color-warm-gray,
+  'tag-color-warm-gray'
+);
+
+$tag-hover-warm-gray: component-tokens.get-var(
+  $tag-hover-warm-gray,
+  'tag-hover-warm-gray'
+);

From 681b2e7fddb1911b94e6eba16465068833abb061 Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Wed, 15 Sep 2021 10:45:44 -0500
Subject: [PATCH 2/2] fix(button): updated test

---
 packages/styles/scss/components/__tests__/button-test.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/styles/scss/components/__tests__/button-test.js b/packages/styles/scss/components/__tests__/button-test.js
index b491bf177b88..a124c975d970 100644
--- a/packages/styles/scss/components/__tests__/button-test.js
+++ b/packages/styles/scss/components/__tests__/button-test.js
@@ -39,10 +39,6 @@ Array [
   "button-padding-ghost-sm",
   "button-border-width",
   "button-outline-width",
-  "white",
-  "g10",
-  "g90",
-  "g100",
   "button-separator",
   "button-primary",
   "button-secondary",
@@ -58,6 +54,7 @@ Array [
   "button-secondary-hover",
   "button-tertiary-hover",
   "button-disabled",
+  "button-tokens",
 ]
 `);
   });