Button: new variants (#3931)

pinterest · Jan 22, 2025 · 9b73731 · 9b73731
1 parent 61ecd18
commit 9b73731
Show file tree

Hide file tree

Showing 11 changed files with 250 additions and 10 deletions.
diff --git a/docs/examples/button/colors.tsx b/docs/examples/button/colors.tsx
@@ -12,7 +12,7 @@ export default function Example() {
   return (
     <Box padding={4}>
       <Flex gap={6} height="100%" width="100%" wrap>
-        {['gray', 'red', 'blue', 'transparent', 'transparentWhiteText'].map((color) => (
+        {['gray', 'red', 'transparent', 'transparentWhiteText', 'dark', 'light'].map((color) => (
           <Flex key={color} direction="column" gap={2}>
             <Box
               alignItems="center"

diff --git a/docs/examples/buttonlink/colors.tsx b/docs/examples/buttonlink/colors.tsx
@@ -4,8 +4,12 @@ export default function Example() {
   return (
     <Box padding={4}>
       <Flex gap={6} height="100%" width="100%" wrap>
-        {['gray', 'red', 'transparent'].map((color) => {
-          const colorCopy: 'gray' | 'red' | 'transparent' = color as 'gray' | 'red' | 'transparent';
+        {['gray', 'red', 'transparent', 'dark'].map((color) => {
+          const colorCopy: 'gray' | 'red' | 'transparent' | 'dark' = color as
+            | 'gray'
+            | 'red'
+            | 'transparent'
+            | 'dark';
 
           return (
             <Flex key={color} direction="column" gap={2}>

diff --git a/packages/gestalt-design-tokens/tests/__snapshots__/web.test.js.snap b/packages/gestalt-design-tokens/tests/__snapshots__/web.test.js.snap
diff --git a/packages/gestalt-design-tokens/tokens/classic/comp-web-color-dark.json b/packages/gestalt-design-tokens/tokens/classic/comp-web-color-dark.json
@@ -249,6 +249,28 @@
             "value": "#1f1f1f"
           }
         },
+        "dark": {
+          "default": {
+            "value": "{color.background.dark}"
+          },
+          "hover": {
+            "value": "#000000"
+          },
+          "active": {
+            "value": "#000000"
+          }
+        },
+        "light": {
+          "default": {
+            "value": "{color.background.light}"
+          },
+          "hover": {
+            "value": "#F8F7F2"
+          },
+          "active": {
+            "value": "#F8F7F2"
+          }
+        },
         "gray": {
           "default": {
             "value": "{color.background.neutral.value}"

diff --git a/packages/gestalt-design-tokens/tokens/classic/comp-web-color-light.json b/packages/gestalt-design-tokens/tokens/classic/comp-web-color-light.json
@@ -255,6 +255,28 @@
             "value": "{color.background.secondary.base.value}"
           }
         },
+        "dark": {
+          "default": {
+            "value": "{color.background.dark}"
+          },
+          "hover": {
+            "value": "#000000"
+          },
+          "active": {
+            "value": "#000000"
+          }
+        },
+        "light": {
+          "default": {
+            "value": "{color.background.light}"
+          },
+          "hover": {
+            "value": "#F8F7F2"
+          },
+          "active": {
+            "value": "#F8F7F2"
+          }
+        },
         "gray": {
           "default": {
             "value": "{color.background.neutral.value}"

diff --git a/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-dark.json b/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-dark.json
@@ -115,6 +115,28 @@
             }
           }
         },
+        "dark": {
+          "default": {
+            "value": "{sema.color.background.dark.value}"
+          },
+          "hover": {
+            "value": "{sema.color.hover.background.dark.value}"
+          },
+          "active": {
+            "value": "{sema.color.pressed.background.dark.value}"
+          }
+        },
+        "light": {
+          "default": {
+            "value": "{sema.color.background.light.value}"
+          },
+          "hover": {
+            "value": "{sema.color.hover.background.light.value}"
+          },
+          "active": {
+            "value": "{sema.color.pressed.background.light.value}"
+          }
+        },
         "elevation": {
           "default": {
             "value": "{sema.color.background.elevation.value}"
@@ -129,7 +151,6 @@
             "value": "{sema.color.background.disabled.value}"
           }
         },
-
         "gray": {
           "default": {
             "value": "{sema.color.background.tertiary.value}"

diff --git a/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json b/packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json
@@ -124,6 +124,28 @@
             "value": "{sema.color.background.disabled.value}"
           }
         },
+        "dark": {
+          "default": {
+            "value": "{sema.color.background.dark.value}"
+          },
+          "hover": {
+            "value": "{sema.color.hover.background.dark.value}"
+          },
+          "active": {
+            "value": "{sema.color.pressed.background.dark.value}"
+          }
+        },
+        "light": {
+          "default": {
+            "value": "{sema.color.background.light.value}"
+          },
+          "hover": {
+            "value": "{sema.color.hover.background.light.value}"
+          },
+          "active": {
+            "value": "{sema.color.pressed.background.light.value}"
+          }
+        },
         "gray": {
           "default": {
             "value": "{sema.color.background.tertiary.value}"

diff --git a/packages/gestalt/src/Button.css b/packages/gestalt/src/Button.css
@@ -201,3 +201,27 @@ a.lgVr:focus {
 .white:active {
   background-color: var(--color-background-button-white-active);
 }
+
+.light {
+  background-color: var(--color-background-light);
+}
+
+.light:hover {
+  background-color: var(--color-background-button-light-hover);
+}
+
+.light:active {
+  background-color: var(--color-background-button-light-active);
+}
+
+.dark {
+  background-color: var(--color-background-dark);
+}
+
+.dark:hover {
+  background-color: var(--color-background-button-dark-hover);
+}
+
+.dark:active {
+  background-color: var(--color-background-button-dark-active);
+}
diff --git a/packages/gestalt/src/Button.tsx b/packages/gestalt/src/Button.tsx
@@ -22,6 +22,8 @@ const DEFAULT_TEXT_COLORS = {
   semiTransparentWhite: 'default',
   transparentWhiteText: 'inverse',
   white: 'default',
+  light: 'dark',
+  dark: 'light',
 } as const;
 
 const SIZE_NAME_TO_PIXEL = {
@@ -65,7 +67,9 @@ type Props = {
     | 'transparent'
     | 'semiTransparentWhite'
     | 'transparentWhiteText'
-    | 'white';
+    | 'white'
+    | 'dark'
+    | 'light';
   /**
    * Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop.
    */
@@ -251,7 +255,6 @@ const ButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(function Butto
   const isDarkModeRed = isDarkMode && color === 'red';
 
   const colorClass = color === 'transparentWhiteText' && !isInVRExperiment ? 'transparent' : color;
-
   const { isFocusVisible } = useFocusVisible();
 
   const sharedTypeClasses = isInVRExperiment

diff --git a/packages/gestalt/src/ButtonLink.tsx b/packages/gestalt/src/ButtonLink.tsx
@@ -20,6 +20,8 @@ const DEFAULT_TEXT_COLORS = {
   semiTransparentWhite: 'default',
   transparentWhiteText: 'inverse',
   white: 'default',
+  light: 'dark',
+  dark: 'light',
 } as const;
 
 const SIZE_NAME_TO_PIXEL = {

diff --git a/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap b/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap
@@ -243,6 +243,12 @@ exports[`ColorSchemeProvider renders styling for dark mode when specified 1`] =
   --color-background-button-white-default: #030303;
   --color-background-button-white-hover: #121212;
   --color-background-button-white-active: #1f1f1f;
+  --color-background-button-dark-default: #111111;
+  --color-background-button-dark-hover: #000000;
+  --color-background-button-dark-active: #000000;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #f8f7f2;
   --color-background-button-gray-default: #cdcdcd;
   --color-background-button-gray-hover: #919191;
   --color-background-button-gray-active: #9b9b9b;
@@ -741,6 +747,12 @@ exports[`ColorSchemeProvider renders styling for light mode when no color scheme
   --color-background-button-white-hover: #f0f0f0;
   --color-background-button-white-active: #e0e0e0;
   --color-background-button-white-disabled: #e9e9e9;
+  --color-background-button-dark-default: #111111;
+  --color-background-button-dark-hover: #000000;
+  --color-background-button-dark-active: #000000;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #f8f7f2;
   --color-background-button-gray-default: #767676;
   --color-background-button-gray-hover: #878787;
   --color-background-button-gray-active: #828282;
@@ -1265,6 +1277,12 @@ exports[`ColorSchemeProvider renders styling for light mode when specified 1`] =
   --color-background-button-white-hover: #f0f0f0;
   --color-background-button-white-active: #e0e0e0;
   --color-background-button-white-disabled: #e9e9e9;
+  --color-background-button-dark-default: #111111;
+  --color-background-button-dark-hover: #000000;
+  --color-background-button-dark-active: #000000;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #f8f7f2;
   --color-background-button-gray-default: #767676;
   --color-background-button-gray-hover: #878787;
   --color-background-button-gray-active: #828282;
@@ -1789,6 +1807,12 @@ exports[`ColorSchemeProvider renders styling with a custom class if has an id 1`
   --color-background-button-white-hover: #f0f0f0;
   --color-background-button-white-active: #e0e0e0;
   --color-background-button-white-disabled: #e9e9e9;
+  --color-background-button-dark-default: #111111;
+  --color-background-button-dark-hover: #000000;
+  --color-background-button-dark-active: #000000;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #f8f7f2;
   --color-background-button-gray-default: #767676;
   --color-background-button-gray-hover: #878787;
   --color-background-button-gray-active: #828282;
@@ -2309,6 +2333,12 @@ exports[`ColorSchemeProvider renders styling with media query when userPreferenc
   --color-background-button-white-default: #030303;
   --color-background-button-white-hover: #121212;
   --color-background-button-white-active: #1f1f1f;
+  --color-background-button-dark-default: #111111;
+  --color-background-button-dark-hover: #000000;
+  --color-background-button-dark-active: #000000;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #f8f7f2;
   --color-background-button-gray-default: #cdcdcd;
   --color-background-button-gray-hover: #919191;
   --color-background-button-gray-active: #9b9b9b;
@@ -3360,6 +3390,12 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
   --color-background-button-tertiary-active: rgba(57, 57, 55, 0.9);
   --color-background-button-tertiary-disabled-default: rgba(255, 255, 255, 0);
   --color-background-button-tertiary-disabled-selected: #2e2e2d;
+  --color-background-button-dark-default: #000000;
+  --color-background-button-dark-hover: #242423;
+  --color-background-button-dark-active: #393937;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #ebebe5;
   --color-background-button-elevation-default: #2e2e2d;
   --color-background-button-elevation-hover: #242423;
   --color-background-button-elevation-active: #393937;
@@ -4373,6 +4409,12 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
   --color-background-button-elevation-hover: #f8f7f2;
   --color-background-button-elevation-active: #ebebe5;
   --color-background-button-elevation-disabled: #e8e7e1;
+  --color-background-button-dark-default: #000000;
+  --color-background-button-dark-hover: #242423;
+  --color-background-button-dark-active: #393937;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #ebebe5;
   --color-background-button-gray-default: #757570;
   --color-background-button-gray-hover: #626260;
   --color-background-button-gray-active: #585856;
@@ -5383,6 +5425,12 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --color-background-button-elevation-hover: #f8f7f2;
   --color-background-button-elevation-active: #ebebe5;
   --color-background-button-elevation-disabled: #e8e7e1;
+  --color-background-button-dark-default: #000000;
+  --color-background-button-dark-hover: #242423;
+  --color-background-button-dark-active: #393937;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #ebebe5;
   --color-background-button-gray-default: #757570;
   --color-background-button-gray-hover: #626260;
   --color-background-button-gray-active: #585856;
@@ -6393,6 +6441,12 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
   --color-background-button-elevation-hover: #f8f7f2;
   --color-background-button-elevation-active: #ebebe5;
   --color-background-button-elevation-disabled: #e8e7e1;
+  --color-background-button-dark-default: #000000;
+  --color-background-button-dark-hover: #242423;
+  --color-background-button-dark-active: #393937;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #ebebe5;
   --color-background-button-gray-default: #757570;
   --color-background-button-gray-hover: #626260;
   --color-background-button-gray-active: #585856;
@@ -7403,6 +7457,12 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
   --color-background-button-elevation-hover: #f8f7f2;
   --color-background-button-elevation-active: #ebebe5;
   --color-background-button-elevation-disabled: #e8e7e1;
+  --color-background-button-dark-default: #000000;
+  --color-background-button-dark-hover: #242423;
+  --color-background-button-dark-active: #393937;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #ebebe5;
   --color-background-button-gray-default: #757570;
   --color-background-button-gray-hover: #626260;
   --color-background-button-gray-active: #585856;
@@ -8413,6 +8473,12 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
   --color-background-button-elevation-hover: #f8f7f2;
   --color-background-button-elevation-active: #ebebe5;
   --color-background-button-elevation-disabled: #e8e7e1;
+  --color-background-button-dark-default: #000000;
+  --color-background-button-dark-hover: #242423;
+  --color-background-button-dark-active: #393937;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #ebebe5;
   --color-background-button-gray-default: #757570;
   --color-background-button-gray-hover: #626260;
   --color-background-button-gray-active: #585856;
@@ -9423,6 +9489,12 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
   --color-background-button-elevation-hover: #f8f7f2;
   --color-background-button-elevation-active: #ebebe5;
   --color-background-button-elevation-disabled: #e8e7e1;
+  --color-background-button-dark-default: #000000;
+  --color-background-button-dark-hover: #242423;
+  --color-background-button-dark-active: #393937;
+  --color-background-button-light-default: #ffffff;
+  --color-background-button-light-hover: #f8f7f2;
+  --color-background-button-light-active: #ebebe5;
   --color-background-button-gray-default: #757570;
   --color-background-button-gray-hover: #626260;
   --color-background-button-gray-active: #585856;