From 3cbb066717890c71ad03704ffaabad507e9d507e Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Wed, 28 Feb 2024 12:48:33 -0500
Subject: [PATCH 1/2] fix(colorpickers): `ColorSwatch` focus styling

---
 .../src/styled/ColorSwatch/StyledColorSwatchInput.ts     | 1 +
 .../src/styled/ColorSwatch/StyledColorSwatchLabel.ts     | 9 +++------
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchInput.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchInput.ts
index 4fb77f72b78..f5fb6bc2b81 100644
--- a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchInput.ts
+++ b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchInput.ts
@@ -21,6 +21,7 @@ export const StyledColorSwatchInput = styled.input.attrs({
   opacity: 0;
   z-index: 1;
   margin: 0;
+  cursor: pointer;
   width: 100%;
   height: 100%;
 
diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts
index 8973b53a2cf..bdb2989e67f 100644
--- a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts
+++ b/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, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, focusStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledButtonPreview } from '../ColorPickerDialog/StyledButtonPreview';
 import { IRGBColor } from '../../types';
 
@@ -18,7 +18,6 @@ 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;
 
@@ -34,9 +33,6 @@ const colorStyles = (props: IStyledColorSwatchLabelProps) => {
 
   return `
     color: ${foregroundColor};
-
-    &[data-garden-focus-visible] {
-      box-shadow: ${boxShadow};
   `;
 };
 
@@ -47,10 +43,11 @@ export const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
 })`
   position: relative;
   border-radius: ${props => props.theme.borderRadii.md};
-  cursor: pointer;
 
   ${colorStyles};
 
+  ${props => focusStyles({ theme: props.theme, selector: '&:has(:focus-visible)' })}
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 

From 130947916ae6d1f7f5fb037f9a3318949e97b481 Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Wed, 28 Feb 2024 13:47:21 -0500
Subject: [PATCH 2/2] Fix cell content positioning

---
 .../src/styled/ColorSwatch/StyledColorSwatchLabel.ts             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts
index bdb2989e67f..e19ff739802 100644
--- a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts
+++ b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts
@@ -42,6 +42,7 @@ export const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   'data-garden-version': PACKAGE_VERSION
 })`
   position: relative;
+  top: 0;
   border-radius: ${props => props.theme.borderRadii.md};
 
   ${colorStyles};