TreeView: Increase touch target size for coarse pointers (#2376)

* Add type support for css customer properties in the sx prop

* Increase touch targets for coarse pointers

* Create orange-beds-rhyme.md

Author: colebemis

.changeset/orange-beds-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Increase touch target size for coarse pointers

src/TreeView/TreeView.tsx

@@ -169,19 +169,24 @@ const Item: React.FC<TreeViewItemProps> = ({
             }
           }}
           sx={{
+            '--toggle-width': '1rem', // 16px
             position: 'relative',
             display: 'grid',
-            gridTemplateColumns: `calc(${level - 1} * 8px) 16px 1fr`,
+            gridTemplateColumns: `calc(${level - 1} * (var(--toggle-width) / 2)) var(--toggle-width) 1fr`,
             gridTemplateAreas: `"spacer toggle content"`,
             width: '100%',
-            height: 32,
+            height: '2rem', // 32px
             fontSize: 1,
             color: 'fg.default',
             borderRadius: 2,
             cursor: 'pointer',
             '&:hover': {
               backgroundColor: 'actionListItem.default.hoverBg'
             },
+            '@media (pointer: coarse)': {
+              '--toggle-width': '1.5rem', // 24px
+              height: '2.75rem' // 44px
+            },
             // WARNING: styled-components v5.2 introduced a bug that changed
             // how it expands `&` in CSS selectors. The following selectors
             // are unnecessarily specific to work around that styled-components bug.

src/sx.ts

@@ -11,7 +11,16 @@ export type BetterCssProperties = {
     : SystemCssProperties[K]
 }
 
-export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject
+// Support CSS custom properties in the `sx` prop
+type CSSCustomProperties = {
+  [key: `--${string}`]: string | number
+}
+
+type CSSSelectorObject = {
+  [cssSelector: string]: SystemStyleObject | CSSCustomProperties
+}
+
+export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject
 
 export interface SxProp {
   sx?: BetterSystemStyleObject