From 811bedf0ff565ebdfb9bc9fd3814f64a3afdaffd Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 26 Sep 2022 17:12:20 -0700
Subject: [PATCH 1/3] Add type support for css customer properties in the sx
 prop

---
 src/sx.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/sx.ts b/src/sx.ts
index d62299f6a45..c00a71ed356 100644
--- a/src/sx.ts
+++ b/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

From 21d105625cc8f5c30e62e590d16c49de675dc0b6 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 26 Sep 2022 17:12:59 -0700
Subject: [PATCH 2/3] Increase touch targets for coarse pointers

---
 src/TreeView/TreeView.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
index 0659b9412c8..5e714021ea6 100644
--- a/src/TreeView/TreeView.tsx
+++ b/src/TreeView/TreeView.tsx
@@ -169,12 +169,13 @@ 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,
@@ -182,6 +183,10 @@ const Item: React.FC<TreeViewItemProps> = ({
             '&: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.

From 196e5e4303f18eb9e58ef659fcc04d83fec60111 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 26 Sep 2022 17:23:20 -0700
Subject: [PATCH 3/3] Create orange-beds-rhyme.md

---
 .changeset/orange-beds-rhyme.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/orange-beds-rhyme.md

diff --git a/.changeset/orange-beds-rhyme.md b/.changeset/orange-beds-rhyme.md
new file mode 100644
index 00000000000..0792d828290
--- /dev/null
+++ b/.changeset/orange-beds-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Increase touch target size for coarse pointers