primer · liuliu-dev · Sep 4, 2025 · Sep 19, 2025 · Sep 19, 2025 · Sep 19, 2025
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update Text component to no longer support sx.
@@ -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', () => {

@@ -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/**/*',

@@ -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);
+}
@@ -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>
 )

@@ -0,0 +1,3 @@
+.DefaultText {
+  color: var(--fgColor-default);
+}
@@ -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"

@@ -285,3 +285,7 @@
     grid-column: -1 /1;
   }
 }
+
+.PlaceholderText {
+  color: var(--fgColor-subtle);
+}
@@ -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>
 }
 
 // ----------------------------------------------------------------------------

@@ -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

@@ -2,6 +2,7 @@ import React, {useState, useRef, useCallback} from 'react'
 import {Stack, 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,29 +22,29 @@ 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
       sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus
       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
       dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam
       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.

@@ -0,0 +1,4 @@
+.SmallParagraphText {
+  font-size: var(--text-body-size-medium, 0.75rem);
+  margin-block-start: 0;
+}
@@ -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,29 +29,29 @@ 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
       sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus
       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
       dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam
       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.

@@ -0,0 +1,4 @@
+.SmallMutedText {
+  font-size: var(--text-body-size-small, 0.75rem);
+  color: var(--fgColor-muted);
+}
@@ -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>

@@ -0,0 +1,44 @@
+.Chord {
+  display: inline-flex;
+  border: var(--borderWidth-thin) solid;
+  font-weight: var(--base-text-weight-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);
+  font-size: 11px; /* stylelint-disable-line primer/typography */
+  padding: var(--base-size-2);
+  line-height: var(--base-size-8); /* stylelint-disable-line primer/typography */
+  min-width: var(--base-size-16);
+}
+
+.ChordNormal:not(.ChordSmall) {
+  border-radius: var(--borderRadius-medium);
+  font-size: var(--text-body-size-small, 0.75rem);
+  padding: var(--base-size-4);
+  line-height: 10px; /* stylelint-disable-line primer/typography */
+  min-width: var(--base-size-20);
+}
@@ -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
@@ -29,33 +31,14 @@ 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
-    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}>

@@ -136,3 +136,18 @@
   right: var(--base-size-4);
   top: var(--base-size-4);
 }
+
+.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);
+  margin-bottom: var(--base-size-12);
+}