Align with finalized designs

zendeskgarden · May 23, 2024 · 816a8c1 · 816a8c1
1 parent 9aba7d3
commit 816a8c1
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/packages/tags/src/styled/StyledClose.ts b/packages/tags/src/styled/StyledClose.ts
@@ -34,13 +34,17 @@ export const StyledClose = styled.button.attrs<unknown>({
   appearance: none; /* [1] */
 
   &:hover {
-    opacity: 1;
+    opacity: ${props => props.theme.opacity[1100]};
   }
 
   &:focus {
     outline: none;
   }
 
+  &:active {
+    opacity: ${props => props.theme.opacity[1200]};
+  }
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 

diff --git a/packages/tags/src/styled/StyledTag.spec.tsx b/packages/tags/src/styled/StyledTag.spec.tsx
@@ -95,7 +95,7 @@ describe('StyledTag', () => {
     it.each([['light'], ['dark']])('renders using a "grey" hue in %s mode', mode => {
       const renderFn = mode === 'light' ? render : renderDark;
       const { container } = renderFn(<StyledTag hue="grey" />);
-      const backgroundColor = mode === 'dark' ? PALETTE.grey[600] : PALETTE.grey[700];
+      const backgroundColor = mode === 'dark' ? PALETTE.grey[300] : PALETTE.grey[700];
       const foregroundColor = mode === 'dark' ? PALETTE.grey[1100] : PALETTE.white;
 
       expect(container.firstChild).toHaveStyleRule('background-color', backgroundColor);

diff --git a/packages/tags/src/styled/StyledTag.ts b/packages/tags/src/styled/StyledTag.ts
@@ -36,7 +36,11 @@ const colorStyles = ({ theme, hue }: ITagProps & ThemeProps<DefaultTheme>) => {
     switch (hue) {
       case 'grey':
       case 'neutralHue':
-        backgroundColor = getColor({ theme, variable: 'background.emphasis' });
+        backgroundColor = getColor({
+          theme,
+          variable: 'background.emphasis',
+          dark: { offset: -300 }
+        });
         break;
 
       case 'blue':