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>
aws-amplify · Aug 22, 2023 · 5cc7679 · 5cc7679
1 parent f8c5b77
commit 5cc7679
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 2 deletions.
diff --git a/.changeset/chatty-terms-brake.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}' },