From d9606735829606ce5b4817217a5fb69d172fe755 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Thu, 4 Sep 2025 23:35:47 +0000
Subject: [PATCH 01/21] remove sx from Text, update Text usage in other
 components

---
 .changeset/olive-rats-serve.md                |  5 ++
 .../src/Button/Button.dev.stories.module.css  |  3 +
 .../react/src/Button/Button.dev.stories.tsx   |  3 +-
 .../react/src/Dialog/Dialog.dev.stories.tsx   |  5 +-
 .../src/Dialog/Dialog.features.stories.tsx    | 13 ++--
 .../src/Dialog/Dialog.stories.module.css      |  4 ++
 packages/react/src/Dialog/Dialog.stories.tsx  | 11 ++--
 .../Hidden/Hidden.examples.stories.module.css |  4 ++
 .../src/Hidden/Hidden.examples.stories.tsx    |  5 +-
 .../components/Chord.module.css               | 45 +++++++++++++
 .../src/KeybindingHint/components/Chord.tsx   | 27 +++-----
 .../src/Overlay/Overlay.features.stories.tsx  |  8 +--
 packages/react/src/Text/Text.docs.json        |  7 +-
 packages/react/src/Text/Text.stories.tsx      |  6 --
 packages/react/src/Text/Text.test.module.css  | 65 +++++++++++++++++++
 packages/react/src/Text/Text.test.tsx         | 61 +++++++++--------
 packages/react/src/Text/Text.tsx              |  6 +-
 17 files changed, 194 insertions(+), 84 deletions(-)
 create mode 100644 .changeset/olive-rats-serve.md
 create mode 100644 packages/react/src/Button/Button.dev.stories.module.css
 create mode 100644 packages/react/src/Dialog/Dialog.stories.module.css
 create mode 100644 packages/react/src/Hidden/Hidden.examples.stories.module.css
 create mode 100644 packages/react/src/KeybindingHint/components/Chord.module.css
 create mode 100644 packages/react/src/Text/Text.test.module.css

diff --git a/.changeset/olive-rats-serve.md b/.changeset/olive-rats-serve.md
new file mode 100644
index 00000000000..38e82f92605
--- /dev/null
+++ b/.changeset/olive-rats-serve.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update Text component to no longer support sx.
diff --git a/packages/react/src/Button/Button.dev.stories.module.css b/packages/react/src/Button/Button.dev.stories.module.css
new file mode 100644
index 00000000000..351a8f5622c
--- /dev/null
+++ b/packages/react/src/Button/Button.dev.stories.module.css
@@ -0,0 +1,3 @@
+.DefaultText {
+  color: var(--fgColor-default);
+}
diff --git a/packages/react/src/Button/Button.dev.stories.tsx b/packages/react/src/Button/Button.dev.stories.tsx
index 977b86a74f5..1ec0d70bb6d 100644
--- a/packages/react/src/Button/Button.dev.stories.tsx
+++ b/packages/react/src/Button/Button.dev.stories.tsx
@@ -2,6 +2,7 @@ import {SearchIcon, TriangleDownIcon, EyeIcon, IssueClosedIcon, HeartFillIcon} f
 import {Button, IconButton} from '.'
 import {default as Text} from '../Text'
 import {Stack} from '../Stack'
+import classes from './Button.dev.stories.module.css'
 
 export default {
   title: 'Components/Button/Dev',
@@ -67,7 +68,7 @@ export const TestSxProp = () => {
         Invariant color overridden
       </Button>
       <Button leadingVisual={IssueClosedIcon} sx={{color: 'done.fg'}}>
-        <Text sx={{color: 'fg.default'}}>Close issue</Text>
+        <Text className={classes.DefaultText}>Close issue</Text>
       </Button>
       <Button
         size="small"
diff --git a/packages/react/src/Dialog/Dialog.dev.stories.tsx b/packages/react/src/Dialog/Dialog.dev.stories.tsx
index abf3f391772..5f29d552eeb 100644
--- a/packages/react/src/Dialog/Dialog.dev.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.dev.stories.tsx
@@ -3,6 +3,7 @@ import {useState, useCallback, useRef} from 'react'
 import {Text, Button} from '..'
 import type {DialogProps, DialogWidth, DialogHeight} from './Dialog'
 import {Dialog} from './Dialog'
+import classes from './Dialog.stories.module.css'
 
 /* Dialog Version 2 */
 
@@ -12,7 +13,7 @@ export default {
 
 const lipsum = (
   <>
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
       lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
       nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
@@ -22,7 +23,7 @@ const lipsum = (
       luctus tempus posuere.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
       lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
       sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
diff --git a/packages/react/src/Dialog/Dialog.features.stories.tsx b/packages/react/src/Dialog/Dialog.features.stories.tsx
index 84fc96b284c..41d206c7461 100644
--- a/packages/react/src/Dialog/Dialog.features.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.features.stories.tsx
@@ -2,6 +2,7 @@ import React, {useState, useRef, useCallback} from 'react'
 import {Box, TextInput, Text, Button, ActionList} from '..'
 import type {DialogProps, DialogWidth, DialogHeight} from './Dialog'
 import {Dialog} from './Dialog'
+import classes from './Dialog.stories.module.css'
 
 /* Dialog Version 2 */
 
@@ -11,7 +12,7 @@ export default {
 
 const lipsum = (
   <>
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
       lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
       nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
@@ -21,7 +22,7 @@ const lipsum = (
       luctus tempus posuere.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
       lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
       sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
@@ -29,7 +30,7 @@ const lipsum = (
       sem. Mauris a est tellus.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales
       molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo,
       condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend
@@ -37,13 +38,13 @@ const lipsum = (
       pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in
       nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend
       lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non
       consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam
       pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet.
@@ -229,7 +230,7 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
 }
 
 const bodyContent = (
-  <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+  <Text className={classes.SmallParagraphText} as="p">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
     lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
     nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
diff --git a/packages/react/src/Dialog/Dialog.stories.module.css b/packages/react/src/Dialog/Dialog.stories.module.css
new file mode 100644
index 00000000000..b18fc44636f
--- /dev/null
+++ b/packages/react/src/Dialog/Dialog.stories.module.css
@@ -0,0 +1,4 @@
+.SmallParagraphText {
+  font-size: var(--text-body-size-small, 0.75rem);
+  margin-block-start: 0;
+}
diff --git a/packages/react/src/Dialog/Dialog.stories.tsx b/packages/react/src/Dialog/Dialog.stories.tsx
index ae938b2c425..84a17f8131c 100644
--- a/packages/react/src/Dialog/Dialog.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.stories.tsx
@@ -3,6 +3,7 @@ import type {Meta} from '@storybook/react-vite'
 import {Button, Text} from '..'
 import type {DialogProps} from './Dialog'
 import {Dialog} from './Dialog'
+import classes from './Dialog.stories.module.css'
 
 /* Dialog Version 2 */
 
@@ -18,7 +19,7 @@ export default meta
 
 const lipsum = (
   <>
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
       lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
       nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
@@ -28,7 +29,7 @@ const lipsum = (
       luctus tempus posuere.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
       lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
       sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
@@ -36,7 +37,7 @@ const lipsum = (
       sem. Mauris a est tellus.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales
       molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo,
       condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend
@@ -44,13 +45,13 @@ const lipsum = (
       pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in
       nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend
       lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non
       consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam
       pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet.
diff --git a/packages/react/src/Hidden/Hidden.examples.stories.module.css b/packages/react/src/Hidden/Hidden.examples.stories.module.css
new file mode 100644
index 00000000000..ef1f5074ceb
--- /dev/null
+++ b/packages/react/src/Hidden/Hidden.examples.stories.module.css
@@ -0,0 +1,4 @@
+.SmallMutedText {
+  font-size: var(--text-body-size-small, 0.75rem);
+  color: var(--fgColor-muted);
+}
diff --git a/packages/react/src/Hidden/Hidden.examples.stories.tsx b/packages/react/src/Hidden/Hidden.examples.stories.tsx
index 8073aff28be..1ecc5d1e145 100644
--- a/packages/react/src/Hidden/Hidden.examples.stories.tsx
+++ b/packages/react/src/Hidden/Hidden.examples.stories.tsx
@@ -4,6 +4,7 @@ import {ArrowRightIcon} from '@primer/octicons-react'
 
 import {PageHeader} from '../PageHeader'
 import {Hidden} from '.'
+import classes from './Hidden.examples.stories.module.css'
 
 export default {
   title: 'Experimental/Components/Hidden/Examples',
@@ -60,7 +61,7 @@ export const PullRequestPage = () => (
       <PageHeader.Description>
         <StateLabel status="pullOpened">Open</StateLabel>
         <Hidden when={['narrow']}>
-          <Text sx={{fontSize: 1, color: 'fg.muted'}}>
+          <Text className={classes.SmallMutedText}>
             <Link href="#" muted sx={{fontWeight: 'bold'}}>
               broccolinisoup
             </Link>{' '}
@@ -75,7 +76,7 @@ export const PullRequestPage = () => (
           </Text>
         </Hidden>
         <Hidden when={['regular', 'wide']}>
-          <Text sx={{fontSize: 1, color: 'fg.muted'}}>
+          <Text className={classes.SmallMutedText}>
             <BranchName href="#">main</BranchName>
             <ArrowRightIcon />
             <BranchName href="#">page-header-initial</BranchName>
diff --git a/packages/react/src/KeybindingHint/components/Chord.module.css b/packages/react/src/KeybindingHint/components/Chord.module.css
new file mode 100644
index 00000000000..67e924a73e5
--- /dev/null
+++ b/packages/react/src/KeybindingHint/components/Chord.module.css
@@ -0,0 +1,45 @@
+.Chord {
+  display: inline-flex;
+  border: 1px solid;
+  font-weight: normal;
+  font-family: normal;
+  gap: 0.5ch;
+  box-shadow: none;
+  vertical-align: baseline;
+  overflow: hidden;
+  justify-content: center;
+}
+
+.ChordNormal {
+  background: var(--bgColor-transparent);
+  color: var(--fgColor-muted);
+  border-color: var(--borderColor-default);
+}
+
+.ChordOnEmphasis {
+  background: var(--counter-bgColor-emphasis);
+  color: var(--fgColor-onEmphasis);
+  border-color: transparent;
+}
+
+.ChordOnPrimary {
+  background: var(--button-primary-bgColor-active);
+  color: var(--fgColor-onEmphasis);
+  border-color: transparent;
+}
+
+.ChordSmall {
+  border-radius: var(--borderRadius-small, 3px);
+  font-size: 11px;
+  padding: 2px;
+  line-height: 8px;
+  min-width: var(--base-size-16);
+}
+
+.ChordNormal:not(.ChordSmall) {
+  border-radius: var(--borderRadius-medium, 6px);
+  font-size: var(--text-body-size-small, 0.75rem);
+  padding: var(--base-size-4);
+  line-height: 10px;
+  min-width: var(--base-size-20);
+}
diff --git a/packages/react/src/KeybindingHint/components/Chord.tsx b/packages/react/src/KeybindingHint/components/Chord.tsx
index 9baca1c88f0..cdde66d89eb 100644
--- a/packages/react/src/KeybindingHint/components/Chord.tsx
+++ b/packages/react/src/KeybindingHint/components/Chord.tsx
@@ -3,6 +3,8 @@ import Text from '../../Text'
 import type {KeybindingHintProps} from '../props'
 import {Key} from './Key'
 import {accessibleKeyName} from '../key-names'
+import {clsx} from 'clsx'
+import classes from './Chord.module.css'
 
 /**
  * Consistent sort order for modifier keys. There should never be more than one non-modifier
@@ -37,25 +39,12 @@ const backgroundColors = {
 
 export const Chord = ({keys, format = 'condensed', variant = 'normal', size = 'normal'}: KeybindingHintProps) => (
   <Text
-    sx={{
-      display: 'inline-flex',
-      bg: backgroundColors[variant],
-      color: variant === 'normal' ? 'var(--fgColor-muted)' : 'var(--fgColor-onEmphasis)',
-      border: '1px solid',
-      borderColor: variant === 'normal' ? 'var(--borderColor-default)' : 'transparent',
-      borderRadius: size === 'small' ? 1 : 2,
-      fontWeight: 'normal',
-      fontFamily: 'normal',
-      fontSize: size === 'small' ? '11px' : 0,
-      p: size === 'small' ? '2px' : 1,
-      gap: '0.5ch',
-      boxShadow: 'none',
-      verticalAlign: 'baseline',
-      overflow: 'hidden',
-      lineHeight: size === 'small' ? '8px' : '10px',
-      minWidth: size === 'small' ? 'var(--base-size-16)' : 'var(--base-size-20)',
-      justifyContent: 'center',
-    }}
+    className={clsx(classes.Chord, {
+      [classes.ChordNormal]: variant === 'normal',
+      [classes.ChordOnEmphasis]: variant === 'onEmphasis',
+      [classes.ChordOnPrimary]: variant === 'onPrimary',
+      [classes.ChordSmall]: size === 'small',
+    })}
   >
     {splitChord(keys).map((k, i) => (
       <Fragment key={i}>
diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index d28150add28..a71c1e6174d 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -262,7 +262,7 @@ export const MemexNestedOverlays = ({role, open}: Args) => {
             aria-label="Set Duration Form"
           >
             <Box sx={{paddingX: 3, display: 'flex', alignItems: 'center', gap: 1}}>
-              <Text color="fg.muted" sx={{fontSize: 1}}>
+              <Text color="fg.muted" fontSize={1}>
                 Duration:
               </Text>
               <TextInput defaultValue={2} aria-label="Duration" />
@@ -388,7 +388,7 @@ export const NestedOverlays = ({role, open}: Args) => {
               ref={secondaryContainer}
             >
               <Box as="form" sx={{display: 'flex', flexDirection: 'column', p: 3}} aria-label="Set Duration Form">
-                <Text color="fg.muted" sx={{fontSize: 1, mb: 3}}>
+                <Text color="fg.muted" fontSize={1} mb={3}>
                   Create a list to organize your starred repositories.
                 </Text>
                 <TextInput placeholder="Name this list" sx={{mb: 2}} />
@@ -464,8 +464,8 @@ export const MemexIssueOverlay = ({role, open}: Args) => {
               <Label size="large">
                 <IssueDraftIcon /> Draft
               </Label>
-              <Text sx={{fontSize: 1}}>opened 2 days ago,</Text>
-              <Text sx={{fontSize: 1}}>showing {editing ? 'input' : 'button'}</Text>
+              <Text fontSize={1}>opened 2 days ago,</Text>
+              <Text fontSize={1}>showing {editing ? 'input' : 'button'}</Text>
             </Box>
             {editing ? (
               <TextInput
diff --git a/packages/react/src/Text/Text.docs.json b/packages/react/src/Text/Text.docs.json
index ef1b7209d61..4cb1510245f 100644
--- a/packages/react/src/Text/Text.docs.json
+++ b/packages/react/src/Text/Text.docs.json
@@ -41,12 +41,7 @@
       "name": "as",
       "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 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.test.module.css b/packages/react/src/Text/Text.test.module.css
new file mode 100644
index 00000000000..347d99f8b47
--- /dev/null
+++ b/packages/react/src/Text/Text.test.module.css
@@ -0,0 +1,65 @@
+/* CSS classes for Text component tests */
+
+.boldText {
+  font-weight: 700;
+}
+
+.normalWeight {
+  font-weight: 400;
+}
+
+.italicText {
+  font-style: italic;
+}
+
+.normalStyle {
+  font-style: normal;
+}
+
+.monoFont {
+  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
+}
+
+.largeText {
+  font-size: 2em;
+}
+
+.extraLargeText {
+  font-size: 100px;
+}
+
+.smallFont {
+  font-size: 12px;
+}
+
+.mediumFont {
+  font-size: 16px;
+}
+
+.condensedLine {
+  line-height: 1.25;
+}
+
+.defaultLine {
+  line-height: 1.5;
+}
+
+.responsiveFont {
+  font-size: 14px;
+}
+
+@media (min-width: 768px) {
+  .responsiveFont {
+    font-size: 16px;
+  }
+}
+
+.responsiveLine {
+  line-height: 1.25;
+}
+
+@media (min-width: 768px) {
+  .responsiveLine {
+    line-height: 1.5;
+  }
+}
diff --git a/packages/react/src/Text/Text.test.tsx b/packages/react/src/Text/Text.test.tsx
index 62ed2818296..0edb78f5d16 100644
--- a/packages/react/src/Text/Text.test.tsx
+++ b/packages/react/src/Text/Text.test.tsx
@@ -1,6 +1,7 @@
 import {Text} from '..'
 import {render} from '@testing-library/react'
 import {describe, it, expect} from 'vitest'
+import testClasses from './Text.test.module.css'
 
 describe('Text', () => {
   it('renders a <span> by default', () => {
@@ -28,27 +29,27 @@ describe('Text', () => {
     expect(container.firstChild).toHaveAttribute('data-testid', 'text-element')
   })
 
-  it('respects fontWeight', () => {
-    const {container} = render(<Text fontWeight="bold">Bold text</Text>)
+  it('applies bold font weight with CSS class', () => {
+    const {container} = render(<Text className={testClasses.boldText}>Bold text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontWeight).toBe('700')
   })
 
-  it('respects fontWeight normal', () => {
-    const {container} = render(<Text fontWeight="normal">Normal text</Text>)
+  it('applies normal font weight with CSS class', () => {
+    const {container} = render(<Text className={testClasses.normalWeight}>Normal text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontWeight).toBe('400')
   })
 
-  it('respects the "fontStyle" prop', () => {
-    const {container} = render(<Text fontStyle="italic">Italic text</Text>)
+  it('applies italic font style with CSS class', () => {
+    const {container} = render(<Text className={testClasses.italicText}>Italic text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontStyle).toBe('italic')
   })
 
-  it('respects fontStyle normal', () => {
+  it('applies normal font style with CSS class', () => {
     const {container} = render(
-      <Text as="i" fontStyle="normal">
+      <Text as="i" className={testClasses.normalStyle}>
         Not italic
       </Text>,
     )
@@ -56,54 +57,58 @@ describe('Text', () => {
     expect(getComputedStyle(textElement).fontStyle).toBe('normal')
   })
 
-  it('respects fontFamily="mono"', () => {
-    const {container} = render(<Text fontFamily="mono">Monospace text</Text>)
+  it('applies monospace font family with CSS class', () => {
+    const {container} = render(<Text className={testClasses.monoFont}>Monospace text</Text>)
     const textElement = container.firstChild as HTMLElement
     const fontFamily = getComputedStyle(textElement).fontFamily
     expect(fontFamily).toContain('mono')
   })
 
-  it('respects other values for fontSize', () => {
-    const {container} = render(<Text fontSize="2em">Large text</Text>)
+  it('applies large font size with CSS class', () => {
+    const {container} = render(<Text className={testClasses.largeText}>Large text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontSize).toBe('32px')
   })
 
-  it('respects numeric fontSize values', () => {
-    const {container} = render(<Text fontSize={100}>Very large text</Text>)
+  it('applies extra large font size with CSS class', () => {
+    const {container} = render(<Text className={testClasses.extraLargeText}>Very large text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontSize).toBe('100px')
   })
 
-  it('applies theme fontSize values', () => {
-    // Test different fontSize values from the theme
-    const fontSizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-    for (const size of fontSizes) {
-      const {container} = render(<Text fontSize={size}>Text</Text>)
+  it('applies different font sizes with CSS classes', () => {
+    // Test different fontSize values using CSS classes
+    const fontSizeClasses = [testClasses.smallFont, testClasses.mediumFont]
+    for (const fontClass of fontSizeClasses) {
+      const {container} = render(<Text className={fontClass}>Text</Text>)
       const textElement = container.firstChild as HTMLElement
       expect(textElement).toBeInTheDocument()
+      expect(textElement).toHaveClass(fontClass)
     }
   })
 
-  it('applies theme lineHeight values', () => {
-    // Test different lineHeight values
-    const lineHeights = ['condensed', 'condensedUltra', 'default']
-    for (const lineHeight of lineHeights) {
-      const {container} = render(<Text lineHeight={lineHeight}>Text</Text>)
+  it('applies different line heights with CSS classes', () => {
+    // Test different lineHeight values using CSS classes
+    const lineHeightClasses = [testClasses.condensedLine, testClasses.defaultLine]
+    for (const lineClass of lineHeightClasses) {
+      const {container} = render(<Text className={lineClass}>Text</Text>)
       const textElement = container.firstChild as HTMLElement
       expect(textElement).toBeInTheDocument()
+      expect(textElement).toHaveClass(lineClass)
     }
   })
 
-  it('supports responsive fontSize arrays', () => {
-    const {container} = render(<Text fontSize={[1, 2]}>Responsive text</Text>)
+  it('supports responsive font size with CSS classes', () => {
+    const {container} = render(<Text className={testClasses.responsiveFont}>Responsive text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(textElement).toBeInTheDocument()
+    expect(textElement).toHaveClass(testClasses.responsiveFont)
   })
 
-  it('supports responsive lineHeight arrays', () => {
-    const {container} = render(<Text lineHeight={['condensed', 'default']}>Responsive text</Text>)
+  it('supports responsive line height with CSS classes', () => {
+    const {container} = render(<Text className={testClasses.responsiveLine}>Responsive text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(textElement).toBeInTheDocument()
+    expect(textElement).toHaveClass(testClasses.responsiveLine)
   })
 })
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 26a9cd1f41f..c3e63438856 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -2,10 +2,8 @@ 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 classes from './Text.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type StyledTextProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14,7 +12,6 @@ type StyledTextProps = {
   weight?: 'light' | 'normal' | 'medium' | 'semibold'
 } & SystemTypographyProps &
   SystemCommonProps &
-  SxProp &
   React.HTMLAttributes<HTMLSpanElement>
 
 const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => {
@@ -22,8 +19,7 @@ const Text = forwardRef(({as: Component = 'span', className, size, weight, ...pr
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
   return (
-    <BoxWithFallback
-      as={Component}
+    <Component
       className={clsx(className, classes.Text)}
       data-size={size}
       data-weight={weight}

From 386025447862a5d8fc2f4e81ef700092feefc04a Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 19 Sep 2025 10:17:46 -0700
Subject: [PATCH 02/21] fix ci

---
 packages/react/src/Overlay/Overlay.features.stories.tsx      | 5 ++---
 .../CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx     | 4 ++--
 packages/react/src/internal/components/InputValidation.tsx   | 4 ++--
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index 79a47d27d22..4854e3b5496 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -256,11 +256,10 @@ export const MemexNestedOverlays = ({role, open}: Args) => {
           ref={containerRef}
           preventOverflow={false}
         >
- 
           <form onSubmit={() => setOverlayOpen(false)} className={classes.FormContainer} aria-label="Set Duration Form">
             <div className={classes.FormRow}>
               <Text color="fg.muted" fontSize={1}>
-                 Duration:
+                Duration:
               </Text>
               <TextInput defaultValue={2} aria-label="Duration" />
               <ActionMenu>
@@ -386,7 +385,7 @@ export const NestedOverlays = ({role, open}: Args) => {
             >
               <form className={classes.CreateFormContent} aria-label="Set Duration Form">
                 <Text color="fg.muted" fontSize={1} mb={3}>
-                   Create a list to organize your starred repositories.
+                  Create a list to organize your starred repositories.
                 </Text>
                 <TextInput placeholder="Name this list" className={classes.TextInputWithMargin} />
                 <Textarea placeholder="Write a description" rows={3} className={classes.TextInputWithMargin} />
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
index bd7735d1fb3..1aa1bcd45b3 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
@@ -7,10 +7,10 @@ import {clsx} from 'clsx'
 
 type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren<SxProp> & {className?: string}
 
-const CheckboxOrRadioGroupCaption: React.FC<CheckboxOrRadioGroupCaptionProps> = ({className, children, sx}) => {
+const CheckboxOrRadioGroupCaption: React.FC<CheckboxOrRadioGroupCaptionProps> = ({className, children}) => {
   const {captionId} = React.useContext(CheckboxOrRadioGroupContext)
   return (
-    <Text className={clsx(className, classes.CheckboxOrRadioGroupCaption)} id={captionId} sx={sx}>
+    <Text className={clsx(className, classes.CheckboxOrRadioGroupCaption)} id={captionId}>
       {children}
     </Text>
   )
diff --git a/packages/react/src/internal/components/InputValidation.tsx b/packages/react/src/internal/components/InputValidation.tsx
index fd5d3344956..4dd5bb5bf95 100644
--- a/packages/react/src/internal/components/InputValidation.tsx
+++ b/packages/react/src/internal/components/InputValidation.tsx
@@ -21,7 +21,7 @@ const validationIconMap: Record<
   error: AlertFillIcon,
 }
 
-const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, className, id, validationStatus, sx}) => {
+const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, className, id, validationStatus}) => {
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
 
   // TODO: use `text-caption-lineHeight` token as a custom property when it's available
@@ -31,7 +31,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, cl
   const iconBoxMinHeight = iconSize * captionLineHeight
 
   return (
-    <Text className={clsx(className, classes.InputValidation)} data-validation-status={validationStatus} sx={sx}>
+    <Text className={clsx(className, classes.InputValidation)} data-validation-status={validationStatus}>
       {IconComponent ? (
         <span
           aria-hidden="true"

From 23991df165534364367c0c4eacedfea7d8060ae2 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 19 Sep 2025 11:14:48 -0700
Subject: [PATCH 03/21] lint fix, export Text in styled-react

---
 eslint.config.mjs                                   |  2 +-
 .../react/src/KeybindingHint/components/Chord.tsx   |  6 ------
 packages/styled-react/src/components/Text.tsx       | 13 +++++++++++++
 packages/styled-react/src/index.tsx                 |  3 ++-
 .../src/{polymorphic.d.ts => polymorphic.ts}        |  0
 5 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 packages/styled-react/src/components/Text.tsx
 rename packages/styled-react/src/{polymorphic.d.ts => polymorphic.ts} (100%)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 0e0e5e0ca4b..6e0f2b9a7a6 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -42,7 +42,7 @@ const config = defineConfig([
     'contributor-docs/adrs/*',
     'examples/codesandbox/**/*',
     'packages/react/src/utils/polymorphic.ts',
-    'packages/styled-react/src/polymorphic.d.ts',
+    'packages/styled-react/src/polymorphic.ts',
     '**/storybook-static',
     '**/CHANGELOG.md',
     '**/node_modules/**/*',
diff --git a/packages/react/src/KeybindingHint/components/Chord.tsx b/packages/react/src/KeybindingHint/components/Chord.tsx
index cdde66d89eb..264fb70b0df 100644
--- a/packages/react/src/KeybindingHint/components/Chord.tsx
+++ b/packages/react/src/KeybindingHint/components/Chord.tsx
@@ -31,12 +31,6 @@ const splitChord = (chord: string) =>
     .map(k => k.toLowerCase())
     .sort(compareLowercaseKeys)
 
-const backgroundColors = {
-  normal: 'var(--bgColor-transparent)',
-  onEmphasis: 'var(--counter-bgColor-emphasis)',
-  onPrimary: 'var(--button-primary-bgColor-active)',
-}
-
 export const Chord = ({keys, format = 'condensed', variant = 'normal', size = 'normal'}: KeybindingHintProps) => (
   <Text
     className={clsx(classes.Chord, {
diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
new file mode 100644
index 00000000000..3689220f336
--- /dev/null
+++ b/packages/styled-react/src/components/Text.tsx
@@ -0,0 +1,13 @@
+import {type SxProp, Text as PrimerText, type TextProps as PrimerTextProps, Box} from '@primer/react'
+import {forwardRef, type ForwardRefExoticComponent, type RefAttributes} from 'react'
+
+type TextProps = PrimerTextProps & SxProp
+
+const Text: ForwardRefExoticComponent<TextProps & RefAttributes<HTMLSpanElement>> = forwardRef<
+  HTMLSpanElement,
+  TextProps
+>((props, ref) => {
+  return <Box as={PrimerText} ref={ref} {...props} />
+})
+
+export {Text}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 66763c5389a..629d773463a 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -92,6 +92,8 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
 
 export {SegmentedControl, StateLabel, SubNav, ToggleSwitch}
 
+export {Text} from './components/Text'
+
 export {
   ActionList,
   ActionMenu,
@@ -122,7 +124,6 @@ export {
   RelativeTime,
   Select,
   Spinner,
-  Text,
   Textarea,
   TextInput,
   Timeline,
diff --git a/packages/styled-react/src/polymorphic.d.ts b/packages/styled-react/src/polymorphic.ts
similarity index 100%
rename from packages/styled-react/src/polymorphic.d.ts
rename to packages/styled-react/src/polymorphic.ts

From 0fa03b45814d8d8c693cb6f7320f9f973af4a10e Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 19 Sep 2025 13:14:24 -0700
Subject: [PATCH 04/21] css lint fix

---
 .../components/Chord.module.css               | 20 +++----
 packages/react/src/Text/Text.test.module.css  | 58 +++++++++----------
 packages/react/src/Text/Text.test.tsx         | 26 ++++-----
 .../SelectPanel.examples.stories.tsx          |  2 +-
 4 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/packages/react/src/KeybindingHint/components/Chord.module.css b/packages/react/src/KeybindingHint/components/Chord.module.css
index 67e924a73e5..f34a349fa03 100644
--- a/packages/react/src/KeybindingHint/components/Chord.module.css
+++ b/packages/react/src/KeybindingHint/components/Chord.module.css
@@ -1,8 +1,8 @@
 .Chord {
   display: inline-flex;
-  border: 1px solid;
-  font-weight: normal;
-  font-family: normal;
+  border: var(--borderWidth-thin) solid;
+  font-weight: var(--base-text-weight-normal);
+  font-family: var(--fontStack-monospace);
   gap: 0.5ch;
   box-shadow: none;
   vertical-align: baseline;
@@ -29,17 +29,17 @@
 }
 
 .ChordSmall {
-  border-radius: var(--borderRadius-small, 3px);
-  font-size: 11px;
-  padding: 2px;
-  line-height: 8px;
+  border-radius: var(--borderRadius-small);
+  font-size: var(--text-caption-size);
+  padding: var(--base-size-2);
+  line-height: var(--text-caption-lineHeight);
   min-width: var(--base-size-16);
 }
 
 .ChordNormal:not(.ChordSmall) {
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
   font-size: var(--text-body-size-small, 0.75rem);
   padding: var(--base-size-4);
-  line-height: 10px;
+  line-height: var(--text-body-lineHeight-small);
   min-width: var(--base-size-20);
-}
+}
\ No newline at end of file
diff --git a/packages/react/src/Text/Text.test.module.css b/packages/react/src/Text/Text.test.module.css
index 347d99f8b47..12dfba3e8d4 100644
--- a/packages/react/src/Text/Text.test.module.css
+++ b/packages/react/src/Text/Text.test.module.css
@@ -1,65 +1,65 @@
 /* CSS classes for Text component tests */
 
-.boldText {
-  font-weight: 700;
+.BoldText {
+  font-weight: var(--base-text-weight-semibold);
 }
 
-.normalWeight {
-  font-weight: 400;
+.NormalWeight {
+  font-weight: var(--base-text-weight-normal);
 }
 
-.italicText {
+.ItalicText {
   font-style: italic;
 }
 
-.normalStyle {
+.NormalStyle {
   font-style: normal;
 }
 
-.monoFont {
-  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
+.MonoFont {
+  font-family: var(--fontStack-monospace);
 }
 
-.largeText {
-  font-size: 2em;
+.LargeText {
+  font-size: var(--text-title-size-large);
 }
 
-.extraLargeText {
-  font-size: 100px;
+.ExtraLargeText {
+  font-size: var(--text-title-size-large);
 }
 
-.smallFont {
-  font-size: 12px;
+.SmallFont {
+  font-size: var(--text-body-size-small);
 }
 
-.mediumFont {
-  font-size: 16px;
+.MediumFont {
+  font-size: var(--text-body-size-large);
 }
 
-.condensedLine {
-  line-height: 1.25;
+.CondensedLine {
+  line-height: var(--text-body-lineHeight-medium);
 }
 
-.defaultLine {
-  line-height: 1.5;
+.DefaultLine {
+  line-height: var(--text-body-lineHeight-large);
 }
 
-.responsiveFont {
-  font-size: 14px;
+.ResponsiveFont {
+  font-size: var(--text-body-size-medium);
 }
 
 @media (min-width: 768px) {
-  .responsiveFont {
-    font-size: 16px;
+  .ResponsiveFont {
+    font-size: var(--text-body-size-large);
   }
 }
 
-.responsiveLine {
-  line-height: 1.25;
+.ResponsiveLine {
+  line-height: var(--text-body-lineHeight-medium);
 }
 
 @media (min-width: 768px) {
-  .responsiveLine {
-    line-height: 1.5;
+  .ResponsiveLine {
+    line-height: var(--text-body-lineHeight-large);
   }
-}
+}
\ No newline at end of file
diff --git a/packages/react/src/Text/Text.test.tsx b/packages/react/src/Text/Text.test.tsx
index 0edb78f5d16..31eea63c7d7 100644
--- a/packages/react/src/Text/Text.test.tsx
+++ b/packages/react/src/Text/Text.test.tsx
@@ -30,26 +30,26 @@ describe('Text', () => {
   })
 
   it('applies bold font weight with CSS class', () => {
-    const {container} = render(<Text className={testClasses.boldText}>Bold text</Text>)
+    const {container} = render(<Text className={testClasses.BoldText}>Bold text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontWeight).toBe('700')
   })
 
   it('applies normal font weight with CSS class', () => {
-    const {container} = render(<Text className={testClasses.normalWeight}>Normal text</Text>)
+    const {container} = render(<Text className={testClasses.NormalWeight}>Normal text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontWeight).toBe('400')
   })
 
   it('applies italic font style with CSS class', () => {
-    const {container} = render(<Text className={testClasses.italicText}>Italic text</Text>)
+    const {container} = render(<Text className={testClasses.ItalicText}>Italic text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontStyle).toBe('italic')
   })
 
   it('applies normal font style with CSS class', () => {
     const {container} = render(
-      <Text as="i" className={testClasses.normalStyle}>
+      <Text as="i" className={testClasses.NormalStyle}>
         Not italic
       </Text>,
     )
@@ -58,27 +58,27 @@ describe('Text', () => {
   })
 
   it('applies monospace font family with CSS class', () => {
-    const {container} = render(<Text className={testClasses.monoFont}>Monospace text</Text>)
+    const {container} = render(<Text className={testClasses.MonoFont}>Monospace text</Text>)
     const textElement = container.firstChild as HTMLElement
     const fontFamily = getComputedStyle(textElement).fontFamily
     expect(fontFamily).toContain('mono')
   })
 
   it('applies large font size with CSS class', () => {
-    const {container} = render(<Text className={testClasses.largeText}>Large text</Text>)
+    const {container} = render(<Text className={testClasses.LargeText}>Large text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontSize).toBe('32px')
   })
 
   it('applies extra large font size with CSS class', () => {
-    const {container} = render(<Text className={testClasses.extraLargeText}>Very large text</Text>)
+    const {container} = render(<Text className={testClasses.ExtraLargeText}>Very large text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontSize).toBe('100px')
   })
 
   it('applies different font sizes with CSS classes', () => {
     // Test different fontSize values using CSS classes
-    const fontSizeClasses = [testClasses.smallFont, testClasses.mediumFont]
+    const fontSizeClasses = [testClasses.SmallFont, testClasses.MediumFont]
     for (const fontClass of fontSizeClasses) {
       const {container} = render(<Text className={fontClass}>Text</Text>)
       const textElement = container.firstChild as HTMLElement
@@ -89,7 +89,7 @@ describe('Text', () => {
 
   it('applies different line heights with CSS classes', () => {
     // Test different lineHeight values using CSS classes
-    const lineHeightClasses = [testClasses.condensedLine, testClasses.defaultLine]
+    const lineHeightClasses = [testClasses.CondensedLine, testClasses.DefaultLine]
     for (const lineClass of lineHeightClasses) {
       const {container} = render(<Text className={lineClass}>Text</Text>)
       const textElement = container.firstChild as HTMLElement
@@ -99,16 +99,16 @@ describe('Text', () => {
   })
 
   it('supports responsive font size with CSS classes', () => {
-    const {container} = render(<Text className={testClasses.responsiveFont}>Responsive text</Text>)
+    const {container} = render(<Text className={testClasses.ResponsiveFont}>Responsive text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(textElement).toBeInTheDocument()
-    expect(textElement).toHaveClass(testClasses.responsiveFont)
+    expect(textElement).toHaveClass(testClasses.ResponsiveFont)
   })
 
   it('supports responsive line height with CSS classes', () => {
-    const {container} = render(<Text className={testClasses.responsiveLine}>Responsive text</Text>)
+    const {container} = render(<Text className={testClasses.ResponsiveLine}>Responsive text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(textElement).toBeInTheDocument()
-    expect(textElement).toHaveClass(testClasses.responsiveLine)
+    expect(textElement).toHaveClass(testClasses.ResponsiveLine)
   })
 })
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
index 26f5e1f05f8..bb3bb6de8de 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -643,7 +643,7 @@ export const ShortSelectPanel = () => {
       </p>
       <SelectPanel title="Select notification channels" onSubmit={onSubmit} onCancel={onCancel}>
         <SelectPanel.Button>
-          <Text sx={{color: 'fg.muted'}}>Notify me:</Text>{' '}
+          <Text color='fg.muted' >Notify me:</Text>{' '}
           {Object.keys(channels)
             .filter(channel => channels[channel as keyof typeof channels])
             .join(', ') || 'Never'}

From d324707d9e17e7511ae6473ff8ffd8b0d60b907b Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 19 Sep 2025 13:16:29 -0700
Subject: [PATCH 05/21] format

---
 packages/react/src/KeybindingHint/components/Chord.module.css   | 2 +-
 packages/react/src/Text/Text.test.module.css                    | 2 +-
 .../experimental/SelectPanel2/SelectPanel.examples.stories.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/KeybindingHint/components/Chord.module.css b/packages/react/src/KeybindingHint/components/Chord.module.css
index f34a349fa03..1487a61129b 100644
--- a/packages/react/src/KeybindingHint/components/Chord.module.css
+++ b/packages/react/src/KeybindingHint/components/Chord.module.css
@@ -42,4 +42,4 @@
   padding: var(--base-size-4);
   line-height: var(--text-body-lineHeight-small);
   min-width: var(--base-size-20);
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/Text/Text.test.module.css b/packages/react/src/Text/Text.test.module.css
index 12dfba3e8d4..885d38d544d 100644
--- a/packages/react/src/Text/Text.test.module.css
+++ b/packages/react/src/Text/Text.test.module.css
@@ -62,4 +62,4 @@
   .ResponsiveLine {
     line-height: var(--text-body-lineHeight-large);
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
index bb3bb6de8de..8b8e482d497 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -643,7 +643,7 @@ export const ShortSelectPanel = () => {
       </p>
       <SelectPanel title="Select notification channels" onSubmit={onSubmit} onCancel={onCancel}>
         <SelectPanel.Button>
-          <Text color='fg.muted' >Notify me:</Text>{' '}
+          <Text color="fg.muted">Notify me:</Text>{' '}
           {Object.keys(channels)
             .filter(channel => channels[channel as keyof typeof channels])
             .join(', ') || 'Never'}

From b517233355efb6529de312c5c84b92d417a92f74 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 19 Sep 2025 15:34:09 -0700
Subject: [PATCH 06/21] vrt tests fix

---
 packages/react/src/Dialog/Dialog.stories.module.css        | 2 +-
 .../react/src/KeybindingHint/components/Chord.module.css   | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Dialog/Dialog.stories.module.css b/packages/react/src/Dialog/Dialog.stories.module.css
index b18fc44636f..5b8e489c39c 100644
--- a/packages/react/src/Dialog/Dialog.stories.module.css
+++ b/packages/react/src/Dialog/Dialog.stories.module.css
@@ -1,4 +1,4 @@
 .SmallParagraphText {
-  font-size: var(--text-body-size-small, 0.75rem);
+  font-size: var(--text-body-size-medium, 0.75rem);
   margin-block-start: 0;
 }
diff --git a/packages/react/src/KeybindingHint/components/Chord.module.css b/packages/react/src/KeybindingHint/components/Chord.module.css
index 1487a61129b..bd8ff1887cc 100644
--- a/packages/react/src/KeybindingHint/components/Chord.module.css
+++ b/packages/react/src/KeybindingHint/components/Chord.module.css
@@ -2,7 +2,6 @@
   display: inline-flex;
   border: var(--borderWidth-thin) solid;
   font-weight: var(--base-text-weight-normal);
-  font-family: var(--fontStack-monospace);
   gap: 0.5ch;
   box-shadow: none;
   vertical-align: baseline;
@@ -30,9 +29,9 @@
 
 .ChordSmall {
   border-radius: var(--borderRadius-small);
-  font-size: var(--text-caption-size);
+  font-size: 11px; /* stylelint-disable-line primer/typography */
   padding: var(--base-size-2);
-  line-height: var(--text-caption-lineHeight);
+  line-height: var(--base-size-8); /* stylelint-disable-line primer/typography */
   min-width: var(--base-size-16);
 }
 
@@ -40,6 +39,6 @@
   border-radius: var(--borderRadius-medium);
   font-size: var(--text-body-size-small, 0.75rem);
   padding: var(--base-size-4);
-  line-height: var(--text-body-lineHeight-small);
+  line-height: 10px; /* stylelint-disable-line primer/typography */
   min-width: var(--base-size-20);
 }

From 8948903a2eab85b962d68bc582e9aace1badab44 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 19 Sep 2025 16:12:07 -0700
Subject: [PATCH 07/21] replace font-size and font-weight with css

---
 e2e/components/CheckboxGroup.test.ts                     | 4 ----
 .../src/Overlay/Overlay.features.stories.module.css      | 4 ++++
 packages/react/src/Overlay/Overlay.features.stories.tsx  | 8 ++++----
 .../SegmentedControl.features.stories.module.css         | 9 +++++++++
 .../SegmentedControl.features.stories.tsx                | 4 ++--
 .../react/src/SelectPanel/SelectPanel.dev.stories.tsx    | 8 ++------
 .../SelectPanel/SelectPanel.features.stories.module.css  | 5 +++++
 .../src/SelectPanel/SelectPanel.features.stories.tsx     | 2 +-
 .../react/src/SelectPanel/SelectPanel.stories.module.css | 5 +++++
 .../src/ToggleSwitch/ToggleSwitch.stories.module.css     | 9 +++++++++
 packages/react/src/ToggleSwitch/ToggleSwitch.stories.tsx | 5 +++--
 11 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 packages/react/src/ToggleSwitch/ToggleSwitch.stories.module.css

diff --git a/e2e/components/CheckboxGroup.test.ts b/e2e/components/CheckboxGroup.test.ts
index d8f0ca44264..adb846d93f8 100644
--- a/e2e/components/CheckboxGroup.test.ts
+++ b/e2e/components/CheckboxGroup.test.ts
@@ -23,10 +23,6 @@ const stories = [
     title: 'Visually Hidden Label',
     id: 'components-checkboxgroup-features--visually-hidden-label',
   },
-  {
-    title: 'SX Props',
-    id: 'components-checkboxgroup-dev--sx-props',
-  },
 ] as const
 
 test.describe('CheckboxGroup', () => {
diff --git a/packages/react/src/Overlay/Overlay.features.stories.module.css b/packages/react/src/Overlay/Overlay.features.stories.module.css
index b8fedfc4532..97226e34f62 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.module.css
+++ b/packages/react/src/Overlay/Overlay.features.stories.module.css
@@ -136,3 +136,7 @@
   right: var(--base-size-4);
   top: var(--base-size-4);
 }
+
+.MediumText {
+  font-size: var(--text-body-size-medium);
+}
diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index 4854e3b5496..1bddeb694a8 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -258,7 +258,7 @@ export const MemexNestedOverlays = ({role, open}: Args) => {
         >
           <form onSubmit={() => setOverlayOpen(false)} className={classes.FormContainer} aria-label="Set Duration Form">
             <div className={classes.FormRow}>
-              <Text color="fg.muted" fontSize={1}>
+              <Text color="fg.muted" className={classes.MediumText}>
                 Duration:
               </Text>
               <TextInput defaultValue={2} aria-label="Duration" />
@@ -384,7 +384,7 @@ export const NestedOverlays = ({role, open}: Args) => {
               ref={secondaryContainer}
             >
               <form className={classes.CreateFormContent} aria-label="Set Duration Form">
-                <Text color="fg.muted" fontSize={1} mb={3}>
+                <Text color="fg.muted" className={classes.MediumText} mb={3}>
                   Create a list to organize your starred repositories.
                 </Text>
                 <TextInput placeholder="Name this list" className={classes.TextInputWithMargin} />
@@ -460,8 +460,8 @@ export const MemexIssueOverlay = ({role, open}: Args) => {
               <Label size="large">
                 <IssueDraftIcon /> Draft
               </Label>
-              <Text fontSize={1}>opened 2 days ago,</Text>
-              <Text fontSize={1}>showing {editing ? 'input' : 'button'}</Text>
+              <Text className={classes.MediumText}>opened 2 days ago,</Text>
+              <Text className={classes.MediumText}>showing {editing ? 'input' : 'button'}</Text>
             </div>
             {editing ? (
               <TextInput
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
index 943e332fe70..8f22c72fcfc 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
+++ b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
@@ -13,3 +13,12 @@
 .LabelAndCaption {
   flex-grow: 1;
 }
+
+.TextSizeMedium {
+  font-size: var(--text-body-size-medium);
+}
+
+.TextLargeBold {
+  font-size: var(--text-body-size-large);
+  font-weight: var(--base-text-weight-semibold);
+}
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx
index 927a96d9a1f..309fbda41d3 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx
@@ -139,10 +139,10 @@ IconOnly.storyName = 'Icon only'
 export const AssociatedWithALabelAndCaption = () => (
   <div className={classes.LabelAndCaptionContainer}>
     <div className={classes.LabelAndCaption}>
-      <Text fontSize={2} fontWeight="bold" id="scLabel-vert" display="block">
+      <Text className={classes.TextLargeBold} id="scLabel-vert" display="block">
         File view
       </Text>
-      <Text color="fg.subtle" fontSize={1} id="scCaption-vert" display="block">
+      <Text color="fg.subtle" className={classes.TextSizeMedium} id="scCaption-vert" display="block">
         Change the way the file is viewed
       </Text>
     </div>
diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
index a8ba175b04c..5db418a413a 100644
--- a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
@@ -248,9 +248,7 @@ export const AllVariants = () => {
 
   return (
     <>
-      <Text fontSize={3} fontWeight="bold">
-        Showcase of all the SelectPanel variants
-      </Text>
+      <Text className={classes.TextTitleMediumBold}>Showcase of all the SelectPanel variants</Text>
       <br />
       <Text>
         Test the different interactions below to see how the SelectPanel behaves in different selection and anchoring
@@ -266,9 +264,7 @@ export const AllVariants = () => {
       <br />
       <br />
 
-      <Text fontSize={2} fontWeight="bold">
-        Extra controls:
-      </Text>
+      <Text className={classes.TextLargeBold}>Extra controls:</Text>
       <FormControl>
         <FormControl.Label>secondaryAction</FormControl.Label>
         <Select value={secondaryAction} onChange={e => setSecondaryAction(e.target.value)}>
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.module.css b/packages/react/src/SelectPanel/SelectPanel.features.stories.module.css
index fc3a583305d..034c1fe28ed 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.module.css
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.module.css
@@ -12,3 +12,8 @@
   color: var(--fgColor-muted);
   display: inline-block;
 }
+
+.TextLargeBold {
+  font-size: var(--text-body-size-large);
+  font-weight: var(--base-text-weight-semibold);
+}
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index b450a4ab45a..76193eeb64b 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -650,7 +650,7 @@ export const CustomisedNoInitialItems = () => {
 
   return (
     <>
-      <Text id="toggle" fontWeight={'bold'} fontSize={2}>
+      <Text id="toggle" className={classes.TextLargeBold}>
         Enable Error State :{isError ? 'On' : 'Off'}
       </Text>
       <ToggleSwitch onClick={onClick} checked={isError} aria-labelledby="toggle" />
diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.module.css b/packages/react/src/SelectPanel/SelectPanel.stories.module.css
index d4233de92a1..73dc3adabbd 100644
--- a/packages/react/src/SelectPanel/SelectPanel.stories.module.css
+++ b/packages/react/src/SelectPanel/SelectPanel.stories.module.css
@@ -6,3 +6,8 @@
   border-width: var(--borderWidth-thin);
   border-style: solid;
 }
+
+.TextLargeBold {
+  font-size: var(--text-body-size-large);
+  font-weight: var(--base-text-weight-semibold);
+}
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.stories.module.css b/packages/react/src/ToggleSwitch/ToggleSwitch.stories.module.css
new file mode 100644
index 00000000000..e97bcbb8d80
--- /dev/null
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.stories.module.css
@@ -0,0 +1,9 @@
+.TextMediumBold {
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.TextLargeBold {
+  font-size: var(--text-body-size-large);
+  font-weight: var(--base-text-weight-semibold);
+}
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.stories.tsx b/packages/react/src/ToggleSwitch/ToggleSwitch.stories.tsx
index 5f34bb5d0f1..83c3c6f645c 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.stories.tsx
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.stories.tsx
@@ -3,6 +3,7 @@ import type {ComponentProps} from '../utils/types'
 import ToggleSwitch from './ToggleSwitch'
 import {Text} from '..'
 import ToggleSwitchStoryWrapper from './ToggleSwitchStoryWrapper'
+import classes from './ToggleSwitch.stories.module.css'
 
 export default {
   title: 'Components/ToggleSwitch',
@@ -16,7 +17,7 @@ export default {
 
 export const Playground: StoryFn<typeof ToggleSwitch> = args => (
   <>
-    <Text id="toggle" fontWeight={'bold'} fontSize={2}>
+    <Text id="toggle" className={classes.TextLargeBold}>
       Toggle label
     </Text>
     <ToggleSwitch {...args} aria-labelledby="toggle" />
@@ -55,7 +56,7 @@ Playground.argTypes = {
 
 export const Default = () => (
   <>
-    <Text id="toggle" fontWeight="bold" fontSize={1}>
+    <Text id="toggle" className={classes.TextMediumBold}>
       Toggle label
     </Text>
     <ToggleSwitch aria-labelledby="toggle" />

From 3969d6d29e7e4f618752d3f8085bd61b972a6e2b Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 19 Sep 2025 16:37:06 -0700
Subject: [PATCH 08/21] color var

---
 .../AnchoredOverlay.stories.module.css        | 10 ++++++++++
 .../AnchoredOverlay.stories.tsx               | 11 ++++------
 packages/react/src/DataTable/Table.module.css |  4 ++++
 packages/react/src/DataTable/Table.tsx        |  2 +-
 .../Overlay.features.stories.module.css       |  7 +++++++
 .../src/Overlay/Overlay.features.stories.tsx  |  6 ++----
 ...gmentedControl.features.stories.module.css |  9 +++++----
 .../SegmentedControl.features.stories.tsx     |  2 +-
 .../TextInputWithTokens.module.css            | 20 +++++++++++++++++++
 .../TextInputWithTokens.tsx                   | 11 +++++++---
 .../SelectPanel.examples.stories.module.css   |  4 ++++
 .../SelectPanel.examples.stories.tsx          |  2 +-
 12 files changed, 67 insertions(+), 21 deletions(-)
 create mode 100644 packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css
new file mode 100644
index 00000000000..d2aee9d9598
--- /dev/null
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css
@@ -0,0 +1,10 @@
+.TextMutedWithMargin {
+  color: var(--fgColor-muted);
+  margin-left: var(--base-size-4);
+}
+
+.TextSmallMutedWithMargin {
+  font-size: var(--text-body-size-small);
+  color: var(--fgColor-muted);
+  margin-left: var(--base-size-4);
+}
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index 2af45cb998f..0c11a0d85ec 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -8,6 +8,7 @@ import {Button} from '../Button'
 import Octicon from '../Octicon'
 import {action} from 'storybook/actions'
 import {Stack} from '../Stack/Stack'
+import classes from './AnchoredOverlay.stories.module.css'
 
 export default {
   title: 'Components/AnchoredOverlay',
@@ -22,7 +23,7 @@ const hoverCard = (
     </Stack>
     <Stack direction="horizontal" gap="none">
       <Text weight="medium">monalisa</Text>
-      <Text color={'var(--fgColor-muted)'} ml={1}>
+      <Text className={classes.TextMutedWithMargin}>
         <Link inline muted href="#">
           Monalisa Octocat
         </Link>
@@ -31,15 +32,11 @@ const hoverCard = (
     <Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
     <Stack direction="horizontal" gap="none">
       <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
-      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
-        Interwebs
-      </Text>
+      <Text className={classes.TextSmallMutedWithMargin}>Interwebs</Text>
     </Stack>
     <Stack direction="horizontal" gap="none">
       <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
-      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
-        Owns this repository
-      </Text>
+      <Text className={classes.TextSmallMutedWithMargin}>Owns this repository</Text>
     </Stack>
   </Stack>
 )
diff --git a/packages/react/src/DataTable/Table.module.css b/packages/react/src/DataTable/Table.module.css
index 3320808e167..83be20f8713 100644
--- a/packages/react/src/DataTable/Table.module.css
+++ b/packages/react/src/DataTable/Table.module.css
@@ -285,3 +285,7 @@
     grid-column: -1 /1;
   }
 }
+
+.PlaceholderText {
+  color: var(--fgColor-subtle);
+}
diff --git a/packages/react/src/DataTable/Table.tsx b/packages/react/src/DataTable/Table.tsx
index e093c015dc9..4a4bee37f6c 100644
--- a/packages/react/src/DataTable/Table.tsx
+++ b/packages/react/src/DataTable/Table.tsx
@@ -227,7 +227,7 @@ function TableCell({align, className, children, scope, ...rest}: TableCellProps)
 type TableCellPlaceholderProps = React.PropsWithChildren
 
 function TableCellPlaceholder({children}: TableCellPlaceholderProps) {
-  return <Text color="fg.subtle">{children}</Text>
+  return <Text className={classes.PlaceholderText}>{children}</Text>
 }
 
 // ----------------------------------------------------------------------------
diff --git a/packages/react/src/Overlay/Overlay.features.stories.module.css b/packages/react/src/Overlay/Overlay.features.stories.module.css
index 97226e34f62..463d5a81ec5 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.module.css
+++ b/packages/react/src/Overlay/Overlay.features.stories.module.css
@@ -139,4 +139,11 @@
 
 .MediumText {
   font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+}
+
+.MediumTextWithMargin {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+  margin-bottom: var(--base-size-12);
 }
diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index 1bddeb694a8..8b42e397006 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -258,9 +258,7 @@ export const MemexNestedOverlays = ({role, open}: Args) => {
         >
           <form onSubmit={() => setOverlayOpen(false)} className={classes.FormContainer} aria-label="Set Duration Form">
             <div className={classes.FormRow}>
-              <Text color="fg.muted" className={classes.MediumText}>
-                Duration:
-              </Text>
+              <Text className={classes.MediumText}>Duration:</Text>
               <TextInput defaultValue={2} aria-label="Duration" />
               <ActionMenu>
                 <ActionMenu.Button sx={{width: 200}} aria-label="Change duration unit">
@@ -384,7 +382,7 @@ export const NestedOverlays = ({role, open}: Args) => {
               ref={secondaryContainer}
             >
               <form className={classes.CreateFormContent} aria-label="Set Duration Form">
-                <Text color="fg.muted" className={classes.MediumText} mb={3}>
+                <Text className={classes.MediumTextWithMargin}>
                   Create a list to organize your starred repositories.
                 </Text>
                 <TextInput placeholder="Name this list" className={classes.TextInputWithMargin} />
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
index 8f22c72fcfc..cbd255925f9 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
+++ b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
@@ -14,11 +14,12 @@
   flex-grow: 1;
 }
 
-.TextSizeMedium {
-  font-size: var(--text-body-size-medium);
-}
-
 .TextLargeBold {
   font-size: var(--text-body-size-large);
   font-weight: var(--base-text-weight-semibold);
 }
+
+.TextMediumSubtle {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+}
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx
index 309fbda41d3..eab5b81d777 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx
@@ -142,7 +142,7 @@ export const AssociatedWithALabelAndCaption = () => (
       <Text className={classes.TextLargeBold} id="scLabel-vert" display="block">
         File view
       </Text>
-      <Text color="fg.subtle" className={classes.TextSizeMedium} id="scCaption-vert" display="block">
+      <Text className={classes.TextMediumSubtle} id="scCaption-vert" display="block">
         Change the way the file is viewed
       </Text>
     </div>
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
index 4b55d451b29..75fa82130b9 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
@@ -40,3 +40,23 @@
     flex-shrink: 0;
   }
 }
+
+.OverflowCountSmall {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-small);
+}
+
+.OverflowCountMedium {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-medium);
+}
+
+.OverflowCountLarge {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-medium);
+}
+
+.OverflowCountXLarge {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-large);
+}
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index a0f3b0a2954..ea0af9ac8e5 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -71,6 +71,13 @@ const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
   xlarge: 2,
 }
 
+const overflowCountClassMap: Record<TokenSizeKeys, string> = {
+  small: styles.OverflowCountSmall,
+  medium: styles.OverflowCountMedium,
+  large: styles.OverflowCountLarge,
+  xlarge: styles.OverflowCountXLarge,
+}
+
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactComponent>(
   {
@@ -319,9 +326,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
           />
         ))}
         {tokensAreTruncated && tokens.length - visibleTokens.length ? (
-          <Text color="fg.muted" fontSize={overflowCountFontSizeMap[size]}>
-            +{tokens.length - visibleTokens.length}
-          </Text>
+          <Text className={overflowCountClassMap[size]}>+{tokens.length - visibleTokens.length}</Text>
         ) : null}
       </div>
       <TextInputInnerVisualSlot
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
index 88cbedab134..bb3de22a978 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
@@ -15,6 +15,10 @@
   color: var(--fgColor-muted);
 }
 
+.TextMuted {
+  color: var(--fgColor-muted);
+}
+
 .FilterButtons {
   display: flex;
   margin-top: var(--base-size-4);
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
index 8b8e482d497..20ece274058 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -643,7 +643,7 @@ export const ShortSelectPanel = () => {
       </p>
       <SelectPanel title="Select notification channels" onSubmit={onSubmit} onCancel={onCancel}>
         <SelectPanel.Button>
-          <Text color="fg.muted">Notify me:</Text>{' '}
+          <Text className={classes.TextMuted}>Notify me:</Text>{' '}
           {Object.keys(channels)
             .filter(channel => channels[channel as keyof typeof channels])
             .join(', ') || 'Never'}

From 850533893fa1a4db3dc660cb1b3ec83c549dc06e Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 19 Sep 2025 17:08:09 -0700
Subject: [PATCH 09/21] text color

---
 .../react/src/Overlay/Overlay.features.stories.module.css  | 6 +++++-
 packages/react/src/Overlay/Overlay.features.stories.tsx    | 2 +-
 .../react/src/TextInputWithTokens/TextInputWithTokens.tsx  | 7 -------
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/Overlay/Overlay.features.stories.module.css b/packages/react/src/Overlay/Overlay.features.stories.module.css
index 463d5a81ec5..1e4b8550d4b 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.module.css
+++ b/packages/react/src/Overlay/Overlay.features.stories.module.css
@@ -137,11 +137,15 @@
   top: var(--base-size-4);
 }
 
-.MediumText {
+.MediumTextMuted {
   font-size: var(--text-body-size-medium);
   color: var(--fgColor-muted);
 }
 
+.MediumText {
+  font-size: var(--text-body-size-medium);
+}
+
 .MediumTextWithMargin {
   font-size: var(--text-body-size-medium);
   color: var(--fgColor-muted);
diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index 8b42e397006..7730638bce4 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -258,7 +258,7 @@ export const MemexNestedOverlays = ({role, open}: Args) => {
         >
           <form onSubmit={() => setOverlayOpen(false)} className={classes.FormContainer} aria-label="Set Duration Form">
             <div className={classes.FormRow}>
-              <Text className={classes.MediumText}>Duration:</Text>
+              <Text className={classes.MediumTextMuted}>Duration:</Text>
               <TextInput defaultValue={2} aria-label="Duration" />
               <ActionMenu>
                 <ActionMenu.Button sx={{width: 200}} aria-label="Change duration unit">
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index ea0af9ac8e5..01b89d24554 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -64,13 +64,6 @@ export type TextInputWithTokensProps<TokenComponentType extends AnyReactComponen
   visibleTokenCount?: number
 } & Omit<TextInputProps, 'size'>
 
-const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
-  small: 0,
-  medium: 1,
-  large: 1,
-  xlarge: 2,
-}
-
 const overflowCountClassMap: Record<TokenSizeKeys, string> = {
   small: styles.OverflowCountSmall,
   medium: styles.OverflowCountMedium,

From 826104c9f5640eaea82d83a076d2f482bef77e15 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 23 Sep 2025 09:42:18 +0200
Subject: [PATCH 10/21] ThemeProvider.test.tsx: Use Box instead of Text

Text no longer supports sx prop, so this test does not make sense anymore. Replaced Text with Box to actually test if the theme is correctly read
---
 .../src/__tests__/ThemeProvider.test.tsx      | 64 +++++++++----------
 .../__snapshots__/ThemeProvider.test.tsx.snap |  6 +-
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/packages/react/src/__tests__/ThemeProvider.test.tsx b/packages/react/src/__tests__/ThemeProvider.test.tsx
index 0ac937b6880..c51a9450fa2 100644
--- a/packages/react/src/__tests__/ThemeProvider.test.tsx
+++ b/packages/react/src/__tests__/ThemeProvider.test.tsx
@@ -2,7 +2,7 @@ import {render, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {describe, expect, it, vi} from 'vitest'
 import React from 'react'
-import {Text, ThemeProvider, useColorSchemeVar, useTheme} from '..'
+import {Box, ThemeProvider, useColorSchemeVar, useTheme} from '..'
 
 // window.matchMedia() is not implemented by JSDOM so we have to create a mock:
 // https://vijs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
@@ -53,9 +53,9 @@ it('respects theme prop', () => {
 
   render(
     <ThemeProvider theme={theme}>
-      <Text color="text" mb={1}>
+      <Box color="text" mb={1}>
         Hello
-      </Text>
+      </Box>
     </ThemeProvider>,
   )
 
@@ -66,9 +66,9 @@ it('respects theme prop', () => {
 it('has default theme', () => {
   render(
     <ThemeProvider>
-      <Text color="fg.default" mb={1}>
+      <Box color="fg.default" mb={1}>
         Hello
-      </Text>
+      </Box>
     </ThemeProvider>,
   )
 
@@ -79,7 +79,7 @@ it('inherits theme from parent', () => {
   render(
     <ThemeProvider theme={exampleTheme}>
       <ThemeProvider>
-        <Text color="text">Hello</Text>
+        <Box color="text">Hello</Box>
       </ThemeProvider>
     </ThemeProvider>,
   )
@@ -90,7 +90,7 @@ it('inherits theme from parent', () => {
 it('defaults to light color scheme', () => {
   render(
     <ThemeProvider theme={exampleTheme}>
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -100,7 +100,7 @@ it('defaults to light color scheme', () => {
 it('defaults to dark color scheme in night mode', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="night">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -112,7 +112,7 @@ it('defaults to first color scheme when passed an invalid color scheme name', ()
 
   render(
     <ThemeProvider theme={exampleTheme} dayScheme="foo">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -125,7 +125,7 @@ it('defaults to first color scheme when passed an invalid color scheme name', ()
 it('respects nightScheme prop', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -135,7 +135,7 @@ it('respects nightScheme prop', () => {
 it('respects nightScheme prop with colorMode="dark"', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="dark" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -145,7 +145,7 @@ it('respects nightScheme prop with colorMode="dark"', () => {
 it('respects dayScheme prop', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -155,7 +155,7 @@ it('respects dayScheme prop', () => {
 it('respects dayScheme prop with colorMode="light"', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="light" dayScheme="dark" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -165,7 +165,7 @@ it('respects dayScheme prop with colorMode="light"', () => {
 it('works in auto mode', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -186,7 +186,7 @@ it('works in auto mode (dark)', () => {
 
   render(
     <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -202,7 +202,7 @@ it('updates when colorMode prop changes', async () => {
     const [colorMode, setColorMode] = React.useState<'day' | 'night'>('day')
     return (
       <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
-        <Text color="text">{colorMode}</Text>
+        <Box color="text">{colorMode}</Box>
         <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
           Toggle
         </button>
@@ -230,7 +230,7 @@ it('updates when dayScheme prop changes', async () => {
     const [dayScheme, setDayScheme] = React.useState('light')
     return (
       <ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
-        <Text color="text">{dayScheme}</Text>
+        <Box color="text">{dayScheme}</Box>
         <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
           Toggle
         </button>
@@ -258,7 +258,7 @@ it('updates when nightScheme prop changes', async () => {
     const [nightScheme, setNightScheme] = React.useState('dark')
     return (
       <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
-        <Text color="text">{nightScheme}</Text>
+        <Box color="text">{nightScheme}</Box>
         <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
           Toggle
         </button>
@@ -290,7 +290,7 @@ it('inherits colorMode from parent', async () => {
           Toggle
         </button>
         <ThemeProvider>
-          <Text color="text">{colorMode}</Text>
+          <Box color="text">{colorMode}</Box>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -316,7 +316,7 @@ it('inherits dayScheme from parent', async () => {
           Toggle
         </button>
         <ThemeProvider colorMode="day">
-          <Text color="text">{dayScheme}</Text>
+          <Box color="text">{dayScheme}</Box>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -342,7 +342,7 @@ it('inherits nightScheme from parent', async () => {
           Toggle
         </button>
         <ThemeProvider colorMode="night">
-          <Text color="text">{nightScheme}</Text>
+          <Box color="text">{nightScheme}</Box>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -372,7 +372,7 @@ describe('setColorMode', () => {
 
     render(
       <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Text color="text">Hello</Text>
+        <Box color="text">Hello</Box>
         <ToggleMode />
       </ThemeProvider>,
     )
@@ -402,7 +402,7 @@ describe('setDayScheme', () => {
 
     render(
       <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Text color="text">Hello</Text>
+        <Box color="text">Hello</Box>
         <ToggleDayScheme />
       </ThemeProvider>,
     )
@@ -432,7 +432,7 @@ describe('setNightScheme', () => {
 
     render(
       <ThemeProvider theme={exampleTheme} colorMode="night">
-        <Text color="text">Hello</Text>
+        <Box color="text">Hello</Box>
         <ToggleNightScheme />
       </ThemeProvider>,
     )
@@ -470,7 +470,7 @@ describe('useColorSchemeVar', () => {
         'inherit',
       )
 
-      return <Text bg={customBg}>Hello</Text>
+      return <Box bg={customBg}>Hello</Box>
     }
 
     render(
@@ -502,7 +502,7 @@ describe('useColorSchemeVar', () => {
     function CustomBg() {
       const customBg = useColorSchemeVar({dark: 'blue'}, 'red')
 
-      return <Text bg={customBg}>Hello</Text>
+      return <Box bg={customBg}>Hello</Box>
     }
 
     render(
@@ -525,7 +525,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Text data-testid="text">{resolvedColorScheme}</Text>
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
     }
 
     render(<Component />)
@@ -537,7 +537,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Text data-testid="text">{resolvedColorScheme}</Text>
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
     }
 
     render(
@@ -553,7 +553,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Text data-testid="text">{resolvedColorScheme}</Text>
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
     }
 
     const schemeToApply = 'dark'
@@ -573,7 +573,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Text data-testid="text">{resolvedColorScheme}</Text>
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
     }
 
     const schemeToApply = 'totally-invalid-colorscheme'
@@ -598,7 +598,7 @@ describe('useTheme().resolvedColorScheme', () => {
       const Component = () => {
         const {resolvedColorScheme} = useTheme()
 
-        return <Text data-testid="text">{resolvedColorScheme}</Text>
+        return <Box data-testid="text">{resolvedColorScheme}</Box>
       }
 
       const schemeToApply = 'dark'
@@ -621,7 +621,7 @@ describe('useTheme().resolvedColorScheme', () => {
       const Component = () => {
         const {resolvedColorScheme} = useTheme()
 
-        return <Text data-testid="text">{resolvedColorScheme}</Text>
+        return <Box data-testid="text">{resolvedColorScheme}</Box>
       }
 
       const schemeToApply = 'totally-invalid-colorscheme'
diff --git a/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
index 1d218553be9..ab7d44ec634 100644
--- a/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`has default theme 1`] = `
-<span
-  class="sc-aXZVg hPmBIl prc-Text-Text-jAl-N"
+<div
+  class="sc-aXZVg hPmBIl"
   color="fg.default"
 >
   Hello
-</span>
+</div>
 `;

From ceb38006eb0645a7e3bccb685db511f5a060f321 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 23 Sep 2025 10:08:33 -0700
Subject: [PATCH 11/21] fix lint issues

---
 packages/react/src/DataTable/Table.module.css             | 2 +-
 packages/react/src/Text/Text.test.module.css              | 3 ++-
 packages/react/src/Text/Text.test.tsx                     | 2 +-
 .../__snapshots__/TextInputWithTokens.test.tsx.snap       | 8 ++------
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/DataTable/Table.module.css b/packages/react/src/DataTable/Table.module.css
index 83be20f8713..142ca253d3e 100644
--- a/packages/react/src/DataTable/Table.module.css
+++ b/packages/react/src/DataTable/Table.module.css
@@ -287,5 +287,5 @@
 }
 
 .PlaceholderText {
-  color: var(--fgColor-subtle);
+  color: var(--fgColor-muted);
 }
diff --git a/packages/react/src/Text/Text.test.module.css b/packages/react/src/Text/Text.test.module.css
index 885d38d544d..472cb03fd93 100644
--- a/packages/react/src/Text/Text.test.module.css
+++ b/packages/react/src/Text/Text.test.module.css
@@ -25,7 +25,8 @@
 }
 
 .ExtraLargeText {
-  font-size: var(--text-title-size-large);
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--base-size-96);
 }
 
 .SmallFont {
diff --git a/packages/react/src/Text/Text.test.tsx b/packages/react/src/Text/Text.test.tsx
index 31eea63c7d7..84efc6b58b5 100644
--- a/packages/react/src/Text/Text.test.tsx
+++ b/packages/react/src/Text/Text.test.tsx
@@ -32,7 +32,7 @@ describe('Text', () => {
   it('applies bold font weight with CSS class', () => {
     const {container} = render(<Text className={testClasses.BoldText}>Bold text</Text>)
     const textElement = container.firstChild as HTMLElement
-    expect(getComputedStyle(textElement).fontWeight).toBe('700')
+    expect(getComputedStyle(textElement).fontWeight).toBe('600')
   })
 
   it('applies normal font weight with CSS class', () => {
diff --git a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
index a3e0420f3ef..b4a4625fe60 100644
--- a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -1033,9 +1033,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
             </span>
           </span>
           <span
-            class="sc-aXZVg eKNwWh prc-Text-Text-jAl-N"
-            color="fg.muted"
-            font-size="2"
+            class="prc-TextInputWithTokens-OverflowCountXLarge-zydSJ prc-Text-Text-jAl-N"
           >
             +
             6
@@ -1154,9 +1152,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
           </span>
         </span>
         <span
-          class="sc-aXZVg eKNwWh prc-Text-Text-jAl-N"
-          color="fg.muted"
-          font-size="2"
+          class="prc-TextInputWithTokens-OverflowCountXLarge-zydSJ prc-Text-Text-jAl-N"
         >
           +
           6

From 4e55bb914b3aa1344d3a5f1e1c564560db2041af Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 23 Sep 2025 11:04:22 -0700
Subject: [PATCH 12/21] color and vrt test fix

---
 .../SegmentedControl.features.stories.module.css                | 2 ++
 packages/react/src/Text/Text.test.tsx                           | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
index cbd255925f9..8ebf0ef2aad 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
+++ b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
@@ -15,11 +15,13 @@
 }
 
 .TextLargeBold {
+  display: block;
   font-size: var(--text-body-size-large);
   font-weight: var(--base-text-weight-semibold);
 }
 
 .TextMediumSubtle {
+  display: block;
   font-size: var(--text-body-size-medium);
   color: var(--fgColor-muted);
 }
diff --git a/packages/react/src/Text/Text.test.tsx b/packages/react/src/Text/Text.test.tsx
index 84efc6b58b5..fa3bdc88310 100644
--- a/packages/react/src/Text/Text.test.tsx
+++ b/packages/react/src/Text/Text.test.tsx
@@ -73,7 +73,7 @@ describe('Text', () => {
   it('applies extra large font size with CSS class', () => {
     const {container} = render(<Text className={testClasses.ExtraLargeText}>Very large text</Text>)
     const textElement = container.firstChild as HTMLElement
-    expect(getComputedStyle(textElement).fontSize).toBe('100px')
+    expect(getComputedStyle(textElement).fontSize).toBe('96px')
   })
 
   it('applies different font sizes with CSS classes', () => {

From 69df0682af33a167276377fc917aca978026ae58 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Wed, 24 Sep 2025 14:28:55 -0700
Subject: [PATCH 13/21] use styled wrapper for Text

---
 packages/styled-react/src/components/Text.tsx | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
index 526dc71f666..27988bbeef9 100644
--- a/packages/styled-react/src/components/Text.tsx
+++ b/packages/styled-react/src/components/Text.tsx
@@ -1,13 +1,15 @@
-import {type SxProp, Text as PrimerText, type TextProps as PrimerTextProps, Box} from '@primer/react'
-import {forwardRef, type ForwardRefExoticComponent, type RefAttributes} from 'react'
+import {type SxProp, Text as PrimerText, type TextProps as PrimerTextProps} from '@primer/react'
+import type {ForwardRefComponent} from '../polymorphic'
+import {sx} from '../sx'
+import styled from 'styled-components'
 
 type TextProps = PrimerTextProps & SxProp
 
-const Text: ForwardRefExoticComponent<TextProps & RefAttributes<HTMLSpanElement>> = forwardRef<
-  HTMLSpanElement,
-  TextProps
->((props, ref) => {
-  return <Box as={PrimerText} ref={ref} {...props} />
-})
-
+const Text: ForwardRefComponent<'span' | React.ComponentType<any> | keyof JSX.IntrinsicElements, TextProps> = styled(
+  PrimerText,
+).withConfig<TextProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
 export {Text, type TextProps}

From f08e9a8d888e0ae9d127caccc5d4c33f52431c59 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Wed, 24 Sep 2025 14:53:21 -0700
Subject: [PATCH 14/21] remove ForwardRefComponent

---
 packages/styled-react/src/components/Text.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
index 27988bbeef9..aeee549e498 100644
--- a/packages/styled-react/src/components/Text.tsx
+++ b/packages/styled-react/src/components/Text.tsx
@@ -1,15 +1,13 @@
 import {type SxProp, Text as PrimerText, type TextProps as PrimerTextProps} from '@primer/react'
-import type {ForwardRefComponent} from '../polymorphic'
 import {sx} from '../sx'
 import styled from 'styled-components'
 
 type TextProps = PrimerTextProps & SxProp
 
-const Text: ForwardRefComponent<'span' | React.ComponentType<any> | keyof JSX.IntrinsicElements, TextProps> = styled(
-  PrimerText,
-).withConfig<TextProps>({
+const Text = styled(PrimerText).withConfig<TextProps>({
   shouldForwardProp: prop => prop !== 'sx',
 })`
   ${sx}
 `
+
 export {Text, type TextProps}

From 246ebec7e426669448f25387640e14d4cde87c2b Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 30 Sep 2025 15:04:51 -0700
Subject: [PATCH 15/21] use new pattern for Text

---
 .../src/__tests__/primer-react.browser.test.tsx       |  1 +
 packages/styled-react/src/components/Text.tsx         | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 3ba4839b0b7..e2f109219d3 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -443,6 +443,7 @@ describe('@primer/react', () => {
   test('Text supports `sx` prop', () => {
     render(<Text as="span" data-testid="component" sx={{background: 'red'}} size="small" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    console.log(screen.getByTestId('component'))
     expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'small')
   })
 
diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
index aeee549e498..f65dc2e308d 100644
--- a/packages/styled-react/src/components/Text.tsx
+++ b/packages/styled-react/src/components/Text.tsx
@@ -1,13 +1,18 @@
 import {type SxProp, Text as PrimerText, type TextProps as PrimerTextProps} from '@primer/react'
 import {sx} from '../sx'
 import styled from 'styled-components'
+import type React from 'react'
 
 type TextProps = PrimerTextProps & SxProp
 
-const Text = styled(PrimerText).withConfig<TextProps>({
-  shouldForwardProp: prop => prop !== 'sx',
-})`
+const StyledText = styled(PrimerText).withConfig<TextProps>({
+  shouldForwardProp: prop => (prop as keyof TextProps) != 'sx',
+})<TextProps>`
   ${sx}
 `
 
+const Text = ({as, ...props}: TextProps) => {
+  return <StyledText {...props} {...(as ? {forwardedAs: as as React.ElementType} : {})} />
+}
+
 export {Text, type TextProps}

From 633755b3e9d20d3a71d252641bcbed089f511993 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 30 Sep 2025 15:06:12 -0700
Subject: [PATCH 16/21] export type

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

diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index de61c27e520..e0b89e1c3f2 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -9,7 +9,7 @@ export {ProgressBar} from '@primer/react'
 export {Select} from '@primer/react'
 export {Textarea} from '@primer/react'
 export {TextInput} from '@primer/react'
-export {Tooltip} from '@primer/react'
+export {Tooltip, type TooltipProps} from '@primer/react'
 export {type TextInputProps} from '@primer/react'
 
 // theming depends on styled-components

From 1ccfe899f830e4812644d819dd702e4643479b25 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 30 Sep 2025 15:13:18 -0700
Subject: [PATCH 17/21] lint fix

---
 .../styled-react/src/__tests__/primer-react.browser.test.tsx    | 1 -
 packages/styled-react/src/components/Text.tsx                   | 2 +-
 packages/styled-react/src/components/Token.tsx                  | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index e2f109219d3..3ba4839b0b7 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -443,7 +443,6 @@ describe('@primer/react', () => {
   test('Text supports `sx` prop', () => {
     render(<Text as="span" data-testid="component" sx={{background: 'red'}} size="small" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-    console.log(screen.getByTestId('component'))
     expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'small')
   })
 
diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
index f65dc2e308d..42030c7c87c 100644
--- a/packages/styled-react/src/components/Text.tsx
+++ b/packages/styled-react/src/components/Text.tsx
@@ -6,7 +6,7 @@ import type React from 'react'
 type TextProps = PrimerTextProps & SxProp
 
 const StyledText = styled(PrimerText).withConfig<TextProps>({
-  shouldForwardProp: prop => (prop as keyof TextProps) != 'sx',
+  shouldForwardProp: prop => (prop as keyof TextProps) !== 'sx',
 })<TextProps>`
   ${sx}
 `
diff --git a/packages/styled-react/src/components/Token.tsx b/packages/styled-react/src/components/Token.tsx
index 2564a1e5ff1..1a0e2102744 100644
--- a/packages/styled-react/src/components/Token.tsx
+++ b/packages/styled-react/src/components/Token.tsx
@@ -15,7 +15,7 @@ type TokenProps = PropsWithChildren<PrimerTokenProps> & SxProp
 const Token: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = React.forwardRef<HTMLElement, TokenProps>(
   ({sx: sxProp, style, ...rest}, ref) => {
     const contextTheme = useTheme()
-    const theme = contextTheme?.theme || defaultTheme
+    const theme = contextTheme.theme || defaultTheme
 
     // If no sx prop is provided, just return PrimerToken directly
     if (!sxProp) {

From f619a9c46a972e1d9134fcb000cf7eae5ace32f8 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 30 Sep 2025 16:04:38 -0700
Subject: [PATCH 18/21] sxProps

---
 packages/styled-react/src/components/Text.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
index 42030c7c87c..5da3ff212bd 100644
--- a/packages/styled-react/src/components/Text.tsx
+++ b/packages/styled-react/src/components/Text.tsx
@@ -1,5 +1,5 @@
-import {type SxProp, Text as PrimerText, type TextProps as PrimerTextProps} from '@primer/react'
-import {sx} from '../sx'
+import {Text as PrimerText, type TextProps as PrimerTextProps} from '@primer/react'
+import {sx, type SxProp} from '../sx'
 import styled from 'styled-components'
 import type React from 'react'
 

From ce5f744f998f2f9c9e0b3a857d5274f8e7742036 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 30 Sep 2025 16:18:50 -0700
Subject: [PATCH 19/21] StyledComponent

---
 packages/styled-react/src/components/Text.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
index 5da3ff212bd..71176080c7e 100644
--- a/packages/styled-react/src/components/Text.tsx
+++ b/packages/styled-react/src/components/Text.tsx
@@ -2,6 +2,8 @@ import {Text as PrimerText, type TextProps as PrimerTextProps} from '@primer/rea
 import {sx, type SxProp} from '../sx'
 import styled from 'styled-components'
 import type React from 'react'
+import {type StyledComponent} from 'styled-components'
+import {forwardRef} from 'react'
 
 type TextProps = PrimerTextProps & SxProp
 
@@ -11,8 +13,8 @@ const StyledText = styled(PrimerText).withConfig<TextProps>({
   ${sx}
 `
 
-const Text = ({as, ...props}: TextProps) => {
-  return <StyledText {...props} {...(as ? {forwardedAs: as as React.ElementType} : {})} />
-}
+const Text = forwardRef<'span', TextProps>(({as, ...props}, ref) => {
+  return <StyledText {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+}) as StyledComponent<'span', any, TextProps, never>
 
 export {Text, type TextProps}

From ba83c2dff7157487c7b3decbbaa56689fce68756 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 30 Sep 2025 16:35:15 -0700
Subject: [PATCH 20/21] ignore any

---
 packages/styled-react/src/components/Text.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
index 71176080c7e..1d758c829a3 100644
--- a/packages/styled-react/src/components/Text.tsx
+++ b/packages/styled-react/src/components/Text.tsx
@@ -15,6 +15,7 @@ const StyledText = styled(PrimerText).withConfig<TextProps>({
 
 const Text = forwardRef<'span', TextProps>(({as, ...props}, ref) => {
   return <StyledText {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 }) as StyledComponent<'span', any, TextProps, never>
 
 export {Text, type TextProps}

From f7fc4c6afb025cbd1ad165c3704f4dca14ec933b Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 30 Sep 2025 16:47:54 -0700
Subject: [PATCH 21/21] format

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

diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
index 1d758c829a3..ee1c22a6385 100644
--- a/packages/styled-react/src/components/Text.tsx
+++ b/packages/styled-react/src/components/Text.tsx
@@ -15,7 +15,7 @@ const StyledText = styled(PrimerText).withConfig<TextProps>({
 
 const Text = forwardRef<'span', TextProps>(({as, ...props}, ref) => {
   return <StyledText {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }) as StyledComponent<'span', any, TextProps, never>
 
 export {Text, type TextProps}