feat(styles): add component tokens to button, tag (#9663)

* feat(styles): add component tokens to button, tag

* fix(button): updated test

Co-authored-by: Scott Strubberg <sstrubberg@us.ibm.com>

Author: joshblack

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 {

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",
 ]
 `);
   });

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;