Pog, IconButton: add "transparentDarkBackground" value for bgColor (#…

…3856)
pinterest · Nov 6, 2024 · 3b8ac76 · 3b8ac76
1 parent 1ce952b
commit 3b8ac76
Show file tree

Hide file tree

Showing 15 changed files with 236 additions and 24 deletions.
diff --git a/docs/docs-components/CombinationNew.tsx b/docs/docs-components/CombinationNew.tsx
@@ -83,7 +83,12 @@ export default function CombinationNew({
       cardShadeColor = 'tertiary';
     }
     if (
-      combinationTitles.some((title) => title.includes('"light"') || title.includes('"washLight"'))
+      combinationTitles.some(
+        (title) =>
+          title.includes('"light"') ||
+          title.includes('"washLight"') ||
+          title.includes('"transparentDarkBackground"'),
+      )
     ) {
       cardShadeColor = 'transparentDarkGray';
     }

diff --git a/docs/examples/iconbutton/disabled.tsx b/docs/examples/iconbutton/disabled.tsx
@@ -32,7 +32,7 @@ export default function Example() {
         bgColor="transparent"
         disabled
         icon="share"
-        label="red"
+        label="transparent"
         size="xl"
       />
       <IconButton

diff --git a/docs/examples/pog/statesOnBackground.tsx b/docs/examples/pog/statesOnBackground.tsx
@@ -59,6 +59,51 @@ export default function Example() {
               <Text size="100">disabled selected</Text>
             </Box>
           </Flex>
+          <Box color="default" padding={1}>
+            <Text>bgColor=transparentDarkBackground</Text>
+          </Box>
+          <Flex alignItems="center" gap={2}>
+            <Pog bgColor="transparentDarkBackground" icon="saved" />
+            <Box color="default" padding={1}>
+              <Text size="100">default</Text>
+            </Box>
+          </Flex>
+          <Flex alignItems="center" gap={2}>
+            <Pog bgColor="transparentDarkBackground" hovered icon="saved" />
+            <Box color="default" padding={1}>
+              <Text size="100">hovered</Text>
+            </Box>
+          </Flex>
+          <Flex alignItems="center" gap={2}>
+            <Pog bgColor="transparentDarkBackground" focused icon="saved" />
+            <Box color="default" padding={1}>
+              <Text size="100">focused</Text>
+            </Box>
+          </Flex>
+          <Flex alignItems="center" gap={2}>
+            <Pog active bgColor="transparentDarkBackground" icon="saved" />
+            <Box color="default" padding={1}>
+              <Text size="100">active</Text>
+            </Box>
+          </Flex>
+          <Flex alignItems="center" gap={2}>
+            <Pog bgColor="transparentDarkBackground" icon="saved" selected />
+            <Box color="default" padding={1}>
+              <Text size="100">selected</Text>
+            </Box>
+          </Flex>
+          <Flex alignItems="center" gap={2}>
+            <Pog bgColor="transparentDarkBackground" disabled icon="saved" />
+            <Box color="default" padding={1}>
+              <Text size="100">disabled</Text>
+            </Box>
+          </Flex>
+          <Flex alignItems="center" gap={2}>
+            <Pog bgColor="transparentDarkBackground" disabled icon="saved" selected />
+            <Box color="default" padding={1}>
+              <Text size="100">disabled selected</Text>
+            </Box>
+          </Flex>
           <Box color="default" padding={1}>
             <Text>bgColor=white</Text>
           </Box>

diff --git a/docs/pages/web/iconbutton.tsx b/docs/pages/web/iconbutton.tsx
@@ -293,6 +293,7 @@ Follow these guidelines for \`bgColor\`
             bgColor={[
               'red',
               'lightGray',
+              'transparentDarkBackground',
               'transparentDarkGray',
               'gray',
               'washLight',

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
@@ -281,6 +281,17 @@
             "value": "#e0e0e0"
           }
         },
+        "transparentdarkbackground": {
+          "default": {
+            "value": "{color.transparent.value}"
+          },
+          "hover": {
+            "value": "rgba(250, 250, 250, 0.5)"
+          },
+          "active": {
+            "value": "rgba(250, 250, 250, 0.6)"
+          }
+        },
         "disabled": {
           "default": {
             "value": "{color.gray.roboflow.700.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
@@ -294,6 +294,20 @@
             "value": "{color.background.secondary.base.value}"
           }
         },
+        "transparentdarkbackground": {
+          "default": {
+            "value": "{color.transparent.value}"
+          },
+          "hover": {
+            "value": "rgba(0, 0, 0, 0.06)"
+          },
+          "active": {
+            "value": "rgba(0, 0, 0, 0.1)"
+          },
+          "disabled": {
+            "value": "{color.background.secondary.base.value}"
+          }
+        },
         "disabled": {
           "default": {
             "value": "{color.background.secondary.base.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
@@ -195,6 +195,20 @@
             }
           }
         },
+        "transparentdarkbackground": {
+          "default": {
+            "value": "{base.color.transparent.value}"
+          },
+          "hover": {
+            "value": "{sema.color.hover.background.wash.light.value}"
+          },
+          "active": {
+            "value": "{sema.color.pressed.background.wash.light.value}"
+          },
+          "disabled": {
+            "value": "{sema.color.background.disabled.value}"
+          }
+        },
         "white": {
           "default": {
             "value": "{sema.color.background.default.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
@@ -98,7 +98,7 @@
         },
         "tertiary": {
           "default": {
-            "value": "transparent"
+            "value": "{base.color.transparent.value}"
           },
           "hover": {
             "value": "{sema.color.hover.background.wash.default.value}"
@@ -107,7 +107,7 @@
             "value": "{sema.color.pressed.background.wash.default.value}"
           },
           "disabled": {
-            "value": "transparent"
+            "value": "{base.color.transparent.value}"
           }
         },
         "gray": {
@@ -180,6 +180,20 @@
             "value": "#00000064"
           }
         },
+        "transparentdarkbackground": {
+          "default": {
+            "value": "{base.color.transparent.value}"
+          },
+          "hover": {
+            "value": "{sema.color.hover.background.wash.dark.value}"
+          },
+          "active": {
+            "value": "{sema.color.pressed.background.wash.dark.value}"
+          },
+          "disabled": {
+            "value": "{sema.color.background.disabled.value}"
+          }
+        },
         "white": {
           "default": {
             "value": "{sema.color.background.default.value}"

diff --git a/packages/gestalt/src/IconButton.tsx b/packages/gestalt/src/IconButton.tsx
@@ -35,6 +35,7 @@ type Props = {
   bgColor?:
     | 'transparent'
     | 'transparentDarkGray'
+    | 'transparentDarkGray'
     | 'gray'
     | 'lightGray'
     | 'washLight'

diff --git a/packages/gestalt/src/IconButton/InternalIconButton.tsx b/packages/gestalt/src/IconButton/InternalIconButton.tsx
@@ -20,6 +20,7 @@ type Props = {
   focusColor?: 'lightBackground' | 'darkBackground';
   bgColor?:
     | 'transparent'
+    | 'transparentDarkBackground'
     | 'transparentDarkGray'
     | 'gray'
     | 'lightGray'
@@ -110,7 +111,7 @@ const InternalIconButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(fu
   let labelColor: 'default' | 'disabled' | 'inverse' = 'default';
   if (disabled) {
     labelColor = 'disabled';
-  } else if (bgColor === 'transparent' && iconColor === 'white') {
+  } else if (bgColor === 'transparentDarkBackground' && iconColor === 'white') {
     labelColor = 'inverse';
   }
 

diff --git a/packages/gestalt/src/Pog.css b/packages/gestalt/src/Pog.css
@@ -126,6 +126,31 @@
   background-color: var(--color-background-button-tertiary-disabled);
 }
 
+.transparentDarkBackground {
+  background-color: var(
+    --color-background-button-transparentdarkbackground-default
+  );
+}
+
+.transparentDarkBackground.hovered,
+.transparentDarkBackground.focused {
+  background-color: var(
+    --color-background-button-transparentdarkbackground-hover
+  );
+}
+
+.transparentDarkBackground.active {
+  background-color: var(
+    --color-background-button-transparentdarkbackground-active
+  );
+}
+
+.transparentDarkBackground.disabled {
+  background-color: var(
+    --color-background-button-transparentdarkbackground-disabled
+  );
+}
+
 .washLight {
   background-color: var(--color-background-button-semitransparentwhite-default);
 }

diff --git a/packages/gestalt/src/Pog.tsx b/packages/gestalt/src/Pog.tsx
@@ -24,6 +24,7 @@ type Props = {
    */
   bgColor?:
     | 'transparent'
+    | 'transparentDarkBackground'
     | 'transparentDarkGray'
     | 'gray'
     | 'lightGray'
@@ -144,6 +145,7 @@ export default function Pog({
     lightGray: 'darkGray',
     red: 'white',
     transparent: 'darkGray',
+    transparentDarkBackground: 'white',
     transparentDarkGray: isInVRExperiment ? 'light' : 'white',
     washLight: isInVRExperiment ? 'dark' : 'darkGray',
     white: 'darkGray',
@@ -191,7 +193,8 @@ export default function Pog({
     [styles.transparentInnerFocus]: focused && bgColor === 'transparent',
     [styles.lightOuterFocus]:
       focused && (bgColor === 'washLight' || focusColor === 'darkBackground'),
-    [styles.inverseOuterFocus]: focused && iconColor === 'white' && bgColor === 'transparent',
+    [styles.inverseOuterFocus]:
+      focused && iconColor === 'white' && bgColor === 'transparentDarkBackground',
     [styles.darkInnerFocus]:
       focused && (bgColor === 'washLight' || focusColor === 'darkBackground'),
     [styles.hovered]: hovered && !active,