Revert "fix(colorpickers): ColorSwatch focus styling (#1726)"

This reverts commit 7e58e69.

Author: geotrev

packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchInput.ts

@@ -21,7 +21,6 @@ export const StyledColorSwatchInput = styled.input.attrs({
   opacity: 0;
   z-index: 1;
   margin: 0;
-  cursor: pointer;
   width: 100%;
   height: 100%;
 

packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts

@@ -7,7 +7,7 @@
 
 import styled, { DefaultTheme, ThemeProps } from 'styled-components';
 import { parseToRgb, readableColor } from 'polished';
-import { DEFAULT_THEME, focusStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledButtonPreview } from '../ColorPickerDialog/StyledButtonPreview';
 import { IRGBColor } from '../../types';
 
@@ -18,6 +18,7 @@ interface IStyledColorSwatchLabelProps extends ThemeProps<DefaultTheme> {
 }
 
 const colorStyles = (props: IStyledColorSwatchLabelProps) => {
+  const boxShadow = props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35)!);
   const { alpha } = parseToRgb(props.backgroundColor) as IRGBColor;
   let foregroundColor;
 
@@ -33,6 +34,9 @@ const colorStyles = (props: IStyledColorSwatchLabelProps) => {
 
   return `
     color: ${foregroundColor};
+
+    &[data-garden-focus-visible] {
+      box-shadow: ${boxShadow};
   `;
 };
 
@@ -42,13 +46,11 @@ export const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   'data-garden-version': PACKAGE_VERSION
 })`
   position: relative;
-  top: 0;
   border-radius: ${props => props.theme.borderRadii.md};
+  cursor: pointer;
 
   ${colorStyles};
 
-  ${props => focusStyles({ theme: props.theme, selector: '&:has(:focus-visible)' })}
-
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;