From 5cc76794a71584e26b1ec699c1dc1713d8a986c9 Mon Sep 17 00:00:00 2001
From: Heather Buchel <hbuchel@gmail.com>
Date: Tue, 22 Aug 2023 13:40:06 -0400
Subject: [PATCH] fix(ui): add backgroundColor token for default Button style
 (#4366)

* fix(ui): add backgroundColor token for default Button style

* Create chatty-terms-brake.md

---------

Co-authored-by: Heather Buchel <buchel@amazon.com>
---
 .changeset/chatty-terms-brake.md                             | 5 +++++
 docs/__tests__/__snapshots__/cssvars-table.test.ts.snap      | 4 ++++
 .../components/button/examples/ButtonThemeExample.tsx        | 5 ++++-
 packages/ui/src/theme/__tests__/defaultTheme.test.ts         | 1 +
 packages/ui/src/theme/__tests__/overrides.test.ts            | 1 +
 packages/ui/src/theme/css/component/button.scss              | 4 +++-
 packages/ui/src/theme/tokens/components/button.ts            | 2 ++
 7 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/chatty-terms-brake.md

diff --git a/.changeset/chatty-terms-brake.md b/.changeset/chatty-terms-brake.md
new file mode 100644
index 00000000000..20d65ccb2cb
--- /dev/null
+++ b/.changeset/chatty-terms-brake.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui": patch
+---
+
+fix(ui): add backgroundColor token for default Button style
diff --git a/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap b/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
index 3ab3d410475..d1e3d4375f1 100644
--- a/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
+++ b/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
@@ -926,6 +926,10 @@ exports[`CSS Variables Table 1`] = `
         \\"variable\\": \\"--amplify-components-button-active-color\\",
         \\"value\\": \\"var(--amplify-colors-font-active)\\"
     },
+    {
+        \\"variable\\": \\"--amplify-components-button-background-color\\",
+        \\"value\\": \\"transparent\\"
+    },
     {
         \\"variable\\": \\"--amplify-components-button-border-color\\",
         \\"value\\": \\"var(--amplify-components-fieldcontrol-border-color)\\"
diff --git a/docs/src/pages/[platform]/components/button/examples/ButtonThemeExample.tsx b/docs/src/pages/[platform]/components/button/examples/ButtonThemeExample.tsx
index 2d00a696b78..cf66469718a 100644
--- a/docs/src/pages/[platform]/components/button/examples/ButtonThemeExample.tsx
+++ b/docs/src/pages/[platform]/components/button/examples/ButtonThemeExample.tsx
@@ -13,7 +13,9 @@ const theme: Theme = {
       button: {
         // this will affect the font weight of all button variants
         fontWeight: { value: '{fontWeights.extrabold}' },
-
+        backgroundColor: { value: '#f1fff5' },
+        borderColor: { value: '{colors.purple.80}' },
+        color: { value: '{colors.purple.100}' },
         outlined: {
           info: {
             borderColor: '{colors.purple.60}',
@@ -59,6 +61,7 @@ const theme: Theme = {
 export const ButtonThemeExample = () => (
   <ThemeProvider theme={theme} colorMode="light">
     <Flex direction="row">
+      <Button>Default</Button>
       <Button variation="primary">Primary</Button>
       <Button variation="primary" colorTheme="error">
         Primary error
diff --git a/packages/ui/src/theme/__tests__/defaultTheme.test.ts b/packages/ui/src/theme/__tests__/defaultTheme.test.ts
index 283ff7cb998..872a42b9fea 100644
--- a/packages/ui/src/theme/__tests__/defaultTheme.test.ts
+++ b/packages/ui/src/theme/__tests__/defaultTheme.test.ts
@@ -132,6 +132,7 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
         --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
         --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+        --amplify-components-button-background-color: transparent;
         --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
         --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
         --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
diff --git a/packages/ui/src/theme/__tests__/overrides.test.ts b/packages/ui/src/theme/__tests__/overrides.test.ts
index a5a2e8b2ca1..0ae413b8ade 100644
--- a/packages/ui/src/theme/__tests__/overrides.test.ts
+++ b/packages/ui/src/theme/__tests__/overrides.test.ts
@@ -166,6 +166,7 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
         --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
         --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+        --amplify-components-button-background-color: transparent;
         --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
         --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
         --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
diff --git a/packages/ui/src/theme/css/component/button.scss b/packages/ui/src/theme/css/component/button.scss
index 2ac8b8a7c53..d6f7a7c7b40 100644
--- a/packages/ui/src/theme/css/component/button.scss
+++ b/packages/ui/src/theme/css/component/button.scss
@@ -3,7 +3,9 @@
  */
 .amplify-button {
   // Internal base properties that are updated per variation and color theme
-  --amplify-internal-button-background-color: transparent;
+  --amplify-internal-button-background-color: var(
+    --amplify-components-button-background-color
+  );
   --amplify-internal-button-border-color: var(
     --amplify-components-button-border-color
   );
diff --git a/packages/ui/src/theme/tokens/components/button.ts b/packages/ui/src/theme/tokens/components/button.ts
index e72502392dc..a5c346bdbce 100644
--- a/packages/ui/src/theme/tokens/components/button.ts
+++ b/packages/ui/src/theme/tokens/components/button.ts
@@ -86,6 +86,7 @@ export type ButtonTokens<Output extends OutputVariantKey> =
     | 'paddingBlockEnd'
     | 'paddingInlineStart'
     | 'paddingInlineEnd'
+    | 'backgroundColor'
     | 'borderColor'
     | 'borderWidth'
     | 'borderStyle'
@@ -129,6 +130,7 @@ export const button: Required<ButtonTokens<'default'>> = {
   paddingInlineEnd: {
     value: '{components.fieldcontrol.paddingInlineEnd.value}',
   },
+  backgroundColor: { value: 'transparent' },
   borderColor: { value: '{components.fieldcontrol.borderColor.value}' },
   borderWidth: { value: '{components.fieldcontrol.borderWidth.value}' },
   borderStyle: { value: '{components.fieldcontrol.borderStyle.value}' },