From 7312d6fc7827c38b38bf0bde89ee90cde47eddff Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 29 Aug 2025 13:52:42 -0700
Subject: [PATCH 01/12] remove sx props

---
 e2e/components/TextInput.test.ts              | 36 ------------------
 packages/react/src/SubNav/SubNav.docs.json    | 20 +---------
 packages/react/src/Text/Text.docs.json        |  7 +---
 packages/react/src/Text/Text.stories.tsx      |  6 ---
 packages/react/src/Text/Text.tsx              | 37 ++++++++-----------
 .../src/TextInput/TextInput.dev.stories.tsx   | 24 ++----------
 packages/react/src/TextInput/TextInput.tsx    |  3 --
 .../TextInputWithTokens.tsx                   |  2 -
 .../react/src/Textarea/Textarea.docs.json     |  7 +---
 .../react/src/Textarea/Textarea.stories.tsx   |  5 ---
 packages/react/src/Textarea/Textarea.tsx      |  6 +--
 11 files changed, 24 insertions(+), 129 deletions(-)

diff --git a/e2e/components/TextInput.test.ts b/e2e/components/TextInput.test.ts
index fceb98ca879..114854866b2 100644
--- a/e2e/components/TextInput.test.ts
+++ b/e2e/components/TextInput.test.ts
@@ -219,24 +219,6 @@ test.describe('TextInput', () => {
     }
   })
 
-  test.describe('Dev: With Sx', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinput-dev--with-sx',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithSx.${theme}.png`)
-        })
-      })
-    }
-  })
-
   test.describe('Dev: With CSS', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
@@ -254,22 +236,4 @@ test.describe('TextInput', () => {
       })
     }
   })
-
-  test.describe('Dev: With Sx and CSS', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinput-dev--with-sx-and-css',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithSxAndCSS.${theme}.png`)
-        })
-      })
-    }
-  })
 })
diff --git a/packages/react/src/SubNav/SubNav.docs.json b/packages/react/src/SubNav/SubNav.docs.json
index 5d918996de1..e43e54928f4 100644
--- a/packages/react/src/SubNav/SubNav.docs.json
+++ b/packages/react/src/SubNav/SubNav.docs.json
@@ -38,11 +38,6 @@
       "name": "aria-label",
       "type": "string",
       "description": "Used to set the `aria-label` on the top level `<nav>` element."
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": [
@@ -67,23 +62,12 @@
           "name": "to",
           "type": "string | Partial<Path>",
           "description": "Used when the item is rendered using a component like React Router's `Link`. The path to navigate to."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
     {
       "name": "SubNav.Links",
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ]
+      "props": []
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/packages/react/src/Text/Text.docs.json b/packages/react/src/Text/Text.docs.json
index ef1b7209d61..9a0523e6f1d 100644
--- a/packages/react/src/Text/Text.docs.json
+++ b/packages/react/src/Text/Text.docs.json
@@ -42,11 +42,6 @@
       "defaultValue": "'span'",
       "type": "React.ElementType"
     },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
-    },
     {
       "name": "size",
       "type": "'large' | 'medium' | 'small'"
@@ -61,4 +56,4 @@
     }
   ],
   "subcomponents": []
-}
+}
\ No newline at end of file
diff --git a/packages/react/src/Text/Text.stories.tsx b/packages/react/src/Text/Text.stories.tsx
index 7b053088702..36f2bab2566 100644
--- a/packages/react/src/Text/Text.stories.tsx
+++ b/packages/react/src/Text/Text.stories.tsx
@@ -20,12 +20,6 @@ Playground.argTypes = {
   as: {
     type: 'string',
   },
-  sx: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
   ref: {
     controls: false,
     table: {
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 26a9cd1f41f..931b0bf66b0 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -1,11 +1,9 @@
 import {clsx} from 'clsx'
-import {type StyledComponent} from 'styled-components'
 import React, {forwardRef} from 'react'
 import type {SystemCommonProps, SystemTypographyProps} from '../constants'
-import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import classes from './Text.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type StyledTextProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14,27 +12,24 @@ type StyledTextProps = {
   weight?: 'light' | 'normal' | 'medium' | 'semibold'
 } & SystemTypographyProps &
   SystemCommonProps &
-  SxProp &
   React.HTMLAttributes<HTMLSpanElement>
 
-const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => {
-  const innerRef = React.useRef<HTMLElement>(null)
-  useRefObjectAsForwardedRef(forwardedRef, innerRef)
+const Text = forwardRef<HTMLElement, StyledTextProps>(
+  ({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => {
+    const innerRef = React.useRef<HTMLElement>(null)
+    useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
-  return (
-    <BoxWithFallback
-      as={Component}
-      className={clsx(className, classes.Text)}
-      data-size={size}
-      data-weight={weight}
-      {...props}
-      // @ts-ignore shh
-      ref={innerRef}
-    />
-  )
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-}) as StyledComponent<'span', any, StyledTextProps, never>
+    return (
+      <Component
+        className={clsx(className, classes.Text)}
+        data-size={size}
+        data-weight={weight}
+        {...props}
+        ref={innerRef}
+      />
+    )
+  },
+) as PolymorphicForwardRefComponent<'span', StyledTextProps>
 
 Text.displayName = 'Text'
 
diff --git a/packages/react/src/TextInput/TextInput.dev.stories.tsx b/packages/react/src/TextInput/TextInput.dev.stories.tsx
index 3e3a5ea021a..ebcf5fc62cd 100644
--- a/packages/react/src/TextInput/TextInput.dev.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.dev.stories.tsx
@@ -1,6 +1,6 @@
 import type React from 'react'
 import type {Meta} from '@storybook/react-vite'
-import {Box, FormControl} from '..'
+import {FormControl} from '..'
 import TextInput from '.'
 import {textInputExcludedControlKeys} from '../utils/story-helpers'
 
@@ -11,28 +11,10 @@ export default {
 } as Meta<React.ComponentProps<typeof TextInput>>
 
 export const WithCSS = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <TextInput className="testCustomClassnameBorderColor" />
     </FormControl>
-  </Box>
-)
-
-export const WithSx = () => (
-  <Box as="form">
-    <FormControl>
-      <FormControl.Label>Default label</FormControl.Label>
-      <TextInput sx={{borderColor: 'red'}} />
-    </FormControl>
-  </Box>
-)
-
-export const WithSxAndCSS = () => (
-  <Box as="form">
-    <FormControl>
-      <FormControl.Label>Default label</FormControl.Label>
-      <TextInput sx={{borderColor: 'red'}} className="testCustomClassnameBorderColor" />
-    </FormControl>
-  </Box>
+  </form>
 )
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 9062b461411..48cf706abfb 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -46,7 +46,6 @@ export type TextInputNonPassthroughProps = {
     | 'contrast'
     | 'disabled'
     | 'monospace'
-    | 'sx'
     | 'width'
     | 'maxWidth'
     | 'minWidth'
@@ -75,7 +74,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       loaderText = 'Loading',
       monospace,
       validationStatus,
-      sx: sxProp,
       size: sizeProp,
       onFocus,
       onBlur,
@@ -137,7 +135,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         contrast={contrast}
         disabled={disabled}
         monospace={monospace}
-        sx={sxProp}
         size={sizeProp}
         width={widthProp}
         minWidth={minWidthProp}
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 934dd956825..529ae600e1b 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -80,7 +80,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     className,
     block,
     disabled,
-    sx: sxProp,
     tokens,
     onTokenRemove,
     tokenComponent: TokenComponent = Token,
@@ -269,7 +268,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       data-token-wrapping={Boolean(preventTokenWrapping || maxHeight) || undefined}
       className={clsx(className, styles.TextInputWrapper)}
       style={maxHeight ? {maxHeight, ...style} : style}
-      sx={sxProp}
     >
       {IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}
       <TextInputInnerVisualSlot
diff --git a/packages/react/src/Textarea/Textarea.docs.json b/packages/react/src/Textarea/Textarea.docs.json
index d3b304b659a..55f5f70b5e4 100644
--- a/packages/react/src/Textarea/Textarea.docs.json
+++ b/packages/react/src/Textarea/Textarea.docs.json
@@ -88,11 +88,6 @@
       "type": "React.ElementType",
       "defaultValue": "\"input\""
     },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
-    },
     {
       "name": "className",
       "type": "string | undefined",
@@ -110,4 +105,4 @@
     }
   ],
   "subcomponents": []
-}
+}
\ No newline at end of file
diff --git a/packages/react/src/Textarea/Textarea.stories.tsx b/packages/react/src/Textarea/Textarea.stories.tsx
index 4953dd42718..5af15f47760 100644
--- a/packages/react/src/Textarea/Textarea.stories.tsx
+++ b/packages/react/src/Textarea/Textarea.stories.tsx
@@ -55,11 +55,6 @@ Playground.argTypes = {
   rows: {
     control: {type: 'number'},
   },
-  sx: {
-    table: {
-      disable: true,
-    },
-  },
   validationStatus: {
     options: ['error', 'success'],
     control: {type: 'radio'},
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 6cabcd57f01..c7eb10d693c 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -2,7 +2,6 @@ import type {TextareaHTMLAttributes, ReactElement} from 'react'
 import React from 'react'
 import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
-import type {SxProp} from '../sx'
 import classes from './TextArea.module.css'
 
 export const DEFAULT_TEXTAREA_ROWS = 7
@@ -46,8 +45,7 @@ export type TextareaProps = {
    * CSS styles to apply to the Textarea
    */
   style?: React.CSSProperties
-} & TextareaHTMLAttributes<HTMLTextAreaElement> &
-  SxProp
+} & TextareaHTMLAttributes<HTMLTextAreaElement>
 
 /**
  * An accessible, native textarea component that supports validation states.
@@ -58,7 +56,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     {
       value,
       disabled,
-      sx: sxProp,
       required,
       validationStatus,
       rows = DEFAULT_TEXTAREA_ROWS,
@@ -76,7 +73,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ): ReactElement => {
     return (
       <TextInputBaseWrapper
-        sx={sxProp}
         validationStatus={validationStatus}
         disabled={disabled}
         block={block}

From 737e7a8ee24d67a1f89d2032de30ac84dc268f0a Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 29 Aug 2025 13:53:23 -0700
Subject: [PATCH 02/12] changeset

---
 .changeset/quick-guests-ask.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/quick-guests-ask.md

diff --git a/.changeset/quick-guests-ask.md b/.changeset/quick-guests-ask.md
new file mode 100644
index 00000000000..f1269a7469e
--- /dev/null
+++ b/.changeset/quick-guests-ask.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove support for sx from the SubNav, Text, Textarea, TextInput, TextInputWithTokens component.

From 9b7a3fdda0e9810e91fabc8e9286f4aaeedb9c9a Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 29 Aug 2025 14:59:35 -0700
Subject: [PATCH 03/12] revert changes in Text, leave Text sx removal for
 separate PR to avoid breaking changes in components that depend on Text

---
 packages/react/src/Text/Text.docs.json   |  5 ++++
 packages/react/src/Text/Text.stories.tsx |  6 ++++
 packages/react/src/Text/Text.tsx         | 37 ++++++++++++++----------
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/Text/Text.docs.json b/packages/react/src/Text/Text.docs.json
index 9a0523e6f1d..ae33a19eef5 100644
--- a/packages/react/src/Text/Text.docs.json
+++ b/packages/react/src/Text/Text.docs.json
@@ -42,6 +42,11 @@
       "defaultValue": "'span'",
       "type": "React.ElementType"
     },
+    {
+      "name": "sx",
+      "type": "SystemStyleObject",
+      "deprecated": true
+    },
     {
       "name": "size",
       "type": "'large' | 'medium' | 'small'"
diff --git a/packages/react/src/Text/Text.stories.tsx b/packages/react/src/Text/Text.stories.tsx
index 36f2bab2566..7b053088702 100644
--- a/packages/react/src/Text/Text.stories.tsx
+++ b/packages/react/src/Text/Text.stories.tsx
@@ -20,6 +20,12 @@ Playground.argTypes = {
   as: {
     type: 'string',
   },
+  sx: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
   ref: {
     controls: false,
     table: {
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 931b0bf66b0..3f241e32eef 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -1,9 +1,11 @@
 import {clsx} from 'clsx'
+import type {StyledComponent} from 'styled-components'
 import React, {forwardRef} from 'react'
 import type {SystemCommonProps, SystemTypographyProps} from '../constants'
+import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks'
-import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import classes from './Text.module.css'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type StyledTextProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -12,24 +14,27 @@ type StyledTextProps = {
   weight?: 'light' | 'normal' | 'medium' | 'semibold'
 } & SystemTypographyProps &
   SystemCommonProps &
+  SxProp &
   React.HTMLAttributes<HTMLSpanElement>
 
-const Text = forwardRef<HTMLElement, StyledTextProps>(
-  ({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => {
-    const innerRef = React.useRef<HTMLElement>(null)
-    useRefObjectAsForwardedRef(forwardedRef, innerRef)
+const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => {
+  const innerRef = React.useRef<HTMLElement>(null)
+  useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
-    return (
-      <Component
-        className={clsx(className, classes.Text)}
-        data-size={size}
-        data-weight={weight}
-        {...props}
-        ref={innerRef}
-      />
-    )
-  },
-) as PolymorphicForwardRefComponent<'span', StyledTextProps>
+  return (
+    <BoxWithFallback
+      as={Component}
+      className={clsx(className, classes.Text)}
+      data-size={size}
+      data-weight={weight}
+      {...props}
+      // @ts-ignore shh
+      ref={innerRef}
+    />
+  )
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) as StyledComponent<'span', any, StyledTextProps, never>
 
 Text.displayName = 'Text'
 

From ccabe92a05b743bc85fff95026a59c3200109371 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 29 Aug 2025 15:01:04 -0700
Subject: [PATCH 04/12] clean up

---
 .changeset/quick-guests-ask.md   | 2 +-
 packages/react/src/Text/Text.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/quick-guests-ask.md b/.changeset/quick-guests-ask.md
index f1269a7469e..50aef5af01c 100644
--- a/.changeset/quick-guests-ask.md
+++ b/.changeset/quick-guests-ask.md
@@ -2,4 +2,4 @@
 '@primer/react': major
 ---
 
-Remove support for sx from the SubNav, Text, Textarea, TextInput, TextInputWithTokens component.
+Remove support for sx from the SubNav, Textarea, TextInput, TextInputWithTokens component.
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 3f241e32eef..26a9cd1f41f 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -1,5 +1,5 @@
 import {clsx} from 'clsx'
-import type {StyledComponent} from 'styled-components'
+import {type StyledComponent} from 'styled-components'
 import React, {forwardRef} from 'react'
 import type {SystemCommonProps, SystemTypographyProps} from '../constants'
 import type {SxProp} from '../sx'

From b7fd07d3c6872bd52f2c12747b17deb91e8bdf35 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 29 Aug 2025 15:21:51 -0700
Subject: [PATCH 05/12] update Overlay stories which uses TextInput with sx

---
 .../src/Overlay/Overlay.features.stories.tsx  | 19 +++++++-------
 .../src/Overlay/Overlay.stories.module.css    | 26 +++++++++++++++++++
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index d28150add28..1323138726d 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -19,6 +19,7 @@ import {
   useFocusTrap,
 } from '..'
 import {Tooltip} from '../TooltipV2'
+import classes from './Overlay.stories.module.css'
 
 export default {
   title: 'Private/Components/Overlay/Features',
@@ -391,8 +392,13 @@ export const NestedOverlays = ({role, open}: Args) => {
                 <Text color="fg.muted" sx={{fontSize: 1, mb: 3}}>
                   Create a list to organize your starred repositories.
                 </Text>
-                <TextInput placeholder="Name this list" sx={{mb: 2}} />
-                <TextInput as="textarea" placeholder="Write a description" rows={3} sx={{mb: 2, textarea: {p: 2}}} />
+                <TextInput placeholder="Name this list" className={classes.TextInputWithMargin} />
+                <TextInput
+                  as="textarea"
+                  placeholder="Write a description"
+                  rows={3}
+                  className={classes.TextAreaWithMargin}
+                />
 
                 <Button variant="primary" onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}>
                   Create
@@ -486,14 +492,7 @@ export const MemexIssueOverlay = ({role, open}: Args) => {
                   }
                 }}
                 ref={inputRef}
-                sx={{
-                  width: '100%',
-                  py: '2px',
-                  px: '7px',
-                  textAlign: 'left',
-                  color: 'fg.default',
-                  input: {fontWeight: 'bold', fontSize: 4, px: 0},
-                }}
+                className={classes.EditingTextInput}
               />
             ) : (
               <Button
diff --git a/packages/react/src/Overlay/Overlay.stories.module.css b/packages/react/src/Overlay/Overlay.stories.module.css
index fd2064a21d8..ec4d1d8f87c 100644
--- a/packages/react/src/Overlay/Overlay.stories.module.css
+++ b/packages/react/src/Overlay/Overlay.stories.module.css
@@ -24,3 +24,29 @@
     width: 500px;
   }
 }
+
+.TextInputWithMargin {
+  margin-bottom: var(--base-size-8);
+}
+
+.TextAreaWithMargin {
+  margin-bottom: var(--base-size-8);
+}
+
+.TextAreaWithMargin textarea {
+  padding: var(--base-size-8);
+}
+
+.EditingTextInput {
+  width: 100%;
+  padding: 2px 7px;
+  text-align: left;
+  color: var(--fgColor-default);
+}
+
+.EditingTextInput input {
+  font-weight: var(--base-text-weight-bold);
+  font-size: var(--text-title-size-large);
+  padding-left: 0;
+  padding-right: 0;
+}

From 33692da488d16eefaf8bb7b994ec217e346cc500 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 29 Aug 2025 16:03:19 -0700
Subject: [PATCH 06/12] fix lint issues

---
 packages/react/src/Overlay/Overlay.stories.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/Overlay/Overlay.stories.module.css b/packages/react/src/Overlay/Overlay.stories.module.css
index ec4d1d8f87c..ecd1fd8e0f9 100644
--- a/packages/react/src/Overlay/Overlay.stories.module.css
+++ b/packages/react/src/Overlay/Overlay.stories.module.css
@@ -39,14 +39,14 @@
 
 .EditingTextInput {
   width: 100%;
-  padding: 2px 7px;
+  padding: var(--base-size-2) var(--base-size-8);
   text-align: left;
   color: var(--fgColor-default);
 }
 
 .EditingTextInput input {
-  font-weight: var(--base-text-weight-bold);
-  font-size: var(--text-title-size-large);
+  font-weight: var(--base-text-weight-semibold);
+  font-size: var(--text-title-size-medium);
   padding-left: 0;
   padding-right: 0;
 }

From 91c109b6d1180f39cf4cfc3f8bf0298524c954c1 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 2 Sep 2025 11:03:10 -0700
Subject: [PATCH 07/12] revert changes in TextInputWithTokens since it will be
 depracated. revert changes in TextInput for next PR

---
 .changeset/quick-guests-ask.md                |  2 +-
 e2e/components/TextInput.test.ts              | 36 +++++++++++++++++++
 .../src/Overlay/Overlay.features.stories.tsx  | 19 +++++-----
 .../src/Overlay/Overlay.stories.module.css    | 26 --------------
 .../src/TextInput/TextInput.dev.stories.tsx   | 24 +++++++++++--
 packages/react/src/TextInput/TextInput.tsx    |  3 ++
 .../TextInputWithTokens.tsx                   |  2 ++
 7 files changed, 73 insertions(+), 39 deletions(-)

diff --git a/.changeset/quick-guests-ask.md b/.changeset/quick-guests-ask.md
index 50aef5af01c..aa588c05a62 100644
--- a/.changeset/quick-guests-ask.md
+++ b/.changeset/quick-guests-ask.md
@@ -2,4 +2,4 @@
 '@primer/react': major
 ---
 
-Remove support for sx from the SubNav, Textarea, TextInput, TextInputWithTokens component.
+Remove support for sx from the SubNav, Textarea component.
diff --git a/e2e/components/TextInput.test.ts b/e2e/components/TextInput.test.ts
index 114854866b2..fceb98ca879 100644
--- a/e2e/components/TextInput.test.ts
+++ b/e2e/components/TextInput.test.ts
@@ -219,6 +219,24 @@ test.describe('TextInput', () => {
     }
   })
 
+  test.describe('Dev: With Sx', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textinput-dev--with-sx',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithSx.${theme}.png`)
+        })
+      })
+    }
+  })
+
   test.describe('Dev: With CSS', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
@@ -236,4 +254,22 @@ test.describe('TextInput', () => {
       })
     }
   })
+
+  test.describe('Dev: With Sx and CSS', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textinput-dev--with-sx-and-css',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithSxAndCSS.${theme}.png`)
+        })
+      })
+    }
+  })
 })
diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index 1323138726d..d28150add28 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -19,7 +19,6 @@ import {
   useFocusTrap,
 } from '..'
 import {Tooltip} from '../TooltipV2'
-import classes from './Overlay.stories.module.css'
 
 export default {
   title: 'Private/Components/Overlay/Features',
@@ -392,13 +391,8 @@ export const NestedOverlays = ({role, open}: Args) => {
                 <Text color="fg.muted" sx={{fontSize: 1, mb: 3}}>
                   Create a list to organize your starred repositories.
                 </Text>
-                <TextInput placeholder="Name this list" className={classes.TextInputWithMargin} />
-                <TextInput
-                  as="textarea"
-                  placeholder="Write a description"
-                  rows={3}
-                  className={classes.TextAreaWithMargin}
-                />
+                <TextInput placeholder="Name this list" sx={{mb: 2}} />
+                <TextInput as="textarea" placeholder="Write a description" rows={3} sx={{mb: 2, textarea: {p: 2}}} />
 
                 <Button variant="primary" onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}>
                   Create
@@ -492,7 +486,14 @@ export const MemexIssueOverlay = ({role, open}: Args) => {
                   }
                 }}
                 ref={inputRef}
-                className={classes.EditingTextInput}
+                sx={{
+                  width: '100%',
+                  py: '2px',
+                  px: '7px',
+                  textAlign: 'left',
+                  color: 'fg.default',
+                  input: {fontWeight: 'bold', fontSize: 4, px: 0},
+                }}
               />
             ) : (
               <Button
diff --git a/packages/react/src/Overlay/Overlay.stories.module.css b/packages/react/src/Overlay/Overlay.stories.module.css
index ecd1fd8e0f9..fd2064a21d8 100644
--- a/packages/react/src/Overlay/Overlay.stories.module.css
+++ b/packages/react/src/Overlay/Overlay.stories.module.css
@@ -24,29 +24,3 @@
     width: 500px;
   }
 }
-
-.TextInputWithMargin {
-  margin-bottom: var(--base-size-8);
-}
-
-.TextAreaWithMargin {
-  margin-bottom: var(--base-size-8);
-}
-
-.TextAreaWithMargin textarea {
-  padding: var(--base-size-8);
-}
-
-.EditingTextInput {
-  width: 100%;
-  padding: var(--base-size-2) var(--base-size-8);
-  text-align: left;
-  color: var(--fgColor-default);
-}
-
-.EditingTextInput input {
-  font-weight: var(--base-text-weight-semibold);
-  font-size: var(--text-title-size-medium);
-  padding-left: 0;
-  padding-right: 0;
-}
diff --git a/packages/react/src/TextInput/TextInput.dev.stories.tsx b/packages/react/src/TextInput/TextInput.dev.stories.tsx
index ebcf5fc62cd..3e3a5ea021a 100644
--- a/packages/react/src/TextInput/TextInput.dev.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.dev.stories.tsx
@@ -1,6 +1,6 @@
 import type React from 'react'
 import type {Meta} from '@storybook/react-vite'
-import {FormControl} from '..'
+import {Box, FormControl} from '..'
 import TextInput from '.'
 import {textInputExcludedControlKeys} from '../utils/story-helpers'
 
@@ -11,10 +11,28 @@ export default {
 } as Meta<React.ComponentProps<typeof TextInput>>
 
 export const WithCSS = () => (
-  <form>
+  <Box as="form">
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <TextInput className="testCustomClassnameBorderColor" />
     </FormControl>
-  </form>
+  </Box>
+)
+
+export const WithSx = () => (
+  <Box as="form">
+    <FormControl>
+      <FormControl.Label>Default label</FormControl.Label>
+      <TextInput sx={{borderColor: 'red'}} />
+    </FormControl>
+  </Box>
+)
+
+export const WithSxAndCSS = () => (
+  <Box as="form">
+    <FormControl>
+      <FormControl.Label>Default label</FormControl.Label>
+      <TextInput sx={{borderColor: 'red'}} className="testCustomClassnameBorderColor" />
+    </FormControl>
+  </Box>
 )
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 48cf706abfb..9062b461411 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -46,6 +46,7 @@ export type TextInputNonPassthroughProps = {
     | 'contrast'
     | 'disabled'
     | 'monospace'
+    | 'sx'
     | 'width'
     | 'maxWidth'
     | 'minWidth'
@@ -74,6 +75,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       loaderText = 'Loading',
       monospace,
       validationStatus,
+      sx: sxProp,
       size: sizeProp,
       onFocus,
       onBlur,
@@ -135,6 +137,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         contrast={contrast}
         disabled={disabled}
         monospace={monospace}
+        sx={sxProp}
         size={sizeProp}
         width={widthProp}
         minWidth={minWidthProp}
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 529ae600e1b..166b122e754 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -80,6 +80,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     className,
     block,
     disabled,
+    sx: sxProp,
     tokens,
     onTokenRemove,
     tokenComponent: TokenComponent = Token,
@@ -267,6 +268,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       onClick={focusInput}
       data-token-wrapping={Boolean(preventTokenWrapping || maxHeight) || undefined}
       className={clsx(className, styles.TextInputWrapper)}
+      sx={sxProp}
       style={maxHeight ? {maxHeight, ...style} : style}
     >
       {IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}

From b98cabb64f2f72536acfe6b646c227d08d3b886d Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 2 Sep 2025 11:07:32 -0700
Subject: [PATCH 08/12] clean up

---
 packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 166b122e754..934dd956825 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -268,8 +268,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       onClick={focusInput}
       data-token-wrapping={Boolean(preventTokenWrapping || maxHeight) || undefined}
       className={clsx(className, styles.TextInputWrapper)}
-      sx={sxProp}
       style={maxHeight ? {maxHeight, ...style} : style}
+      sx={sxProp}
     >
       {IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}
       <TextInputInnerVisualSlot

From b114ec60ae148366afafc1d15d656d30d4115f7e Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 2 Sep 2025 11:33:46 -0700
Subject: [PATCH 09/12] TextInputWithTokens

---
 .changeset/quick-guests-ask.md                                 | 2 +-
 packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/.changeset/quick-guests-ask.md b/.changeset/quick-guests-ask.md
index aa588c05a62..e24f270b06b 100644
--- a/.changeset/quick-guests-ask.md
+++ b/.changeset/quick-guests-ask.md
@@ -2,4 +2,4 @@
 '@primer/react': major
 ---
 
-Remove support for sx from the SubNav, Textarea component.
+Remove support for sx from the SubNav, Textarea, TextInputWithTokens component.
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 934dd956825..529ae600e1b 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -80,7 +80,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     className,
     block,
     disabled,
-    sx: sxProp,
     tokens,
     onTokenRemove,
     tokenComponent: TokenComponent = Token,
@@ -269,7 +268,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       data-token-wrapping={Boolean(preventTokenWrapping || maxHeight) || undefined}
       className={clsx(className, styles.TextInputWrapper)}
       style={maxHeight ? {maxHeight, ...style} : style}
-      sx={sxProp}
     >
       {IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}
       <TextInputInnerVisualSlot

From 22603abfcc68b662ecb4f19459d83812ca444613 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 12 Sep 2025 15:39:38 -0700
Subject: [PATCH 10/12] update changeset

---
 .changeset/quick-guests-ask.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/quick-guests-ask.md b/.changeset/quick-guests-ask.md
index e24f270b06b..7778f7bf3be 100644
--- a/.changeset/quick-guests-ask.md
+++ b/.changeset/quick-guests-ask.md
@@ -1,5 +1,5 @@
 ---
-'@primer/react': major
+'@primer/react': patch
 ---
 
-Remove support for sx from the SubNav, Textarea, TextInputWithTokens component.
+Remove support for sx from the SubNav, Text, Textarea stories and docs.

From 8232a170d247d80138faa08ca8b7841072ff9764 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 12 Sep 2025 15:40:49 -0700
Subject: [PATCH 11/12] clean up

---
 .changeset/quick-guests-ask.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/quick-guests-ask.md b/.changeset/quick-guests-ask.md
index 7778f7bf3be..98562c41acf 100644
--- a/.changeset/quick-guests-ask.md
+++ b/.changeset/quick-guests-ask.md
@@ -2,4 +2,4 @@
 '@primer/react': patch
 ---
 
-Remove support for sx from the SubNav, Text, Textarea stories and docs.
+Remove support for sx from the SubNav and Textarea stories and docs.

From 1d4040b2a35f38b223222644dc742740c66d429e Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 16 Sep 2025 12:19:26 -0700
Subject: [PATCH 12/12] no need of changeset

---
 .changeset/quick-guests-ask.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 .changeset/quick-guests-ask.md

diff --git a/.changeset/quick-guests-ask.md b/.changeset/quick-guests-ask.md
deleted file mode 100644
index 98562c41acf..00000000000
--- a/.changeset/quick-guests-ask.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@primer/react': patch
----
-
-Remove support for sx from the SubNav and Textarea stories and docs.