From 9071055adff2d80e3954db6591761ed91bb61d73 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 19 Sep 2025 14:01:03 +0200
Subject: [PATCH 1/9] ConfirmationDialog

---
 .../ConfirmationDialog.features.stories.tsx                 | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
index 4fa7a953b3f..f7e643e5413 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
@@ -1,7 +1,6 @@
 import type React from 'react'
 import {useState, useCallback} from 'react'
 import type {Meta} from '@storybook/react-vite'
-import {useTheme} from '..'
 import {Button} from '../Button'
 import {ActionMenu} from '../ActionMenu'
 import {ActionList} from '../ActionList'
@@ -15,18 +14,17 @@ export default {
 
 export const ShorthandHook = () => {
   const confirm = useConfirm()
-  const {theme} = useTheme()
   const onButtonClick = useCallback(
     async (event: React.MouseEvent) => {
       if (
         (await confirm({title: 'Are you sure?', content: 'Do you really want to turn this button green?'})) &&
         event.target instanceof HTMLElement
       ) {
-        event.target.style.color = theme?.colors.success.fg ?? 'green'
+        event.target.style.color = 'var(--fgColor-success)'
         event.target.textContent = "I'm green!"
       }
     },
-    [confirm, theme],
+    [confirm],
   )
   return (
     <div className={classes.ButtonContainer}>

From 2590fba0be6796a494a6e02e1af62c25b1d7ec96 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 19 Sep 2025 14:01:06 +0200
Subject: [PATCH 2/9] Overlay

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

diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index aa9cfc1e374..7b661537e1f 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -1,7 +1,6 @@
 import type {ComponentPropsWithRef, ReactElement} from 'react'
 import React, {useEffect, useRef} from 'react'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
-import {get} from '../constants'
 import type {AriaRole, Merge} from '../utils/types'
 import type {TouchOrMouseEvent} from '../hooks'
 import {useOverlay} from '../hooks'
@@ -9,12 +8,12 @@ import Portal from '../Portal'
 import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import type {AnchorSide} from '@primer/behaviors'
-import {useTheme} from '../ThemeProvider'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Overlay.module.css'
 import {clsx} from 'clsx'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
+import theme from '../theme'
 
 type StyledOverlayProps = {
   width?: keyof typeof widthMap
@@ -194,9 +193,8 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
   ): ReactElement => {
     const overlayRef = useRef<HTMLDivElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, overlayRef)
-    const {theme} = useTheme()
-    const slideAnimationDistance = parseInt(get('space.2')(theme).replace('px', ''))
-    const slideAnimationEasing = get('animation.easeOutCubic')(theme)
+    const slideAnimationDistance = 8 // hardcoded value for --base-size-2 or theme.space[2]
+    const slideAnimationEasing = theme.animation.easeOutCubic
 
     useOverlay({
       overlayRef,

From 9a9d4caf21a51eeb194e93089314d88d60a21bfc Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 19 Sep 2025 14:01:12 +0200
Subject: [PATCH 3/9] UnderlineNav

---
 packages/react/src/UnderlineNav/UnderlineNav.tsx        | 7 ++-----
 packages/react/src/UnderlineNav/UnderlineNavContext.tsx | 3 ---
 packages/react/src/UnderlineNav/styles.ts               | 7 +++----
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index c0f44fe244c..510f8c6f980 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -6,10 +6,9 @@ import sx from '../sx'
 import {UnderlineNavContext} from './UnderlineNavContext'
 import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
 import {useResizeObserver} from '../hooks/useResizeObserver'
-import {useTheme} from '../ThemeProvider'
 import type {ChildWidthArray, ResponsiveProps, ChildSize} from './types'
 import VisuallyHidden from '../_VisuallyHidden'
-import {moreBtnStyles, getDividerStyle, menuStyles, menuItemStyles, baseMenuStyles, baseMenuMinWidth} from './styles'
+import {moreBtnStyles, dividerStyles, menuStyles, menuItemStyles, baseMenuStyles, baseMenuMinWidth} from './styles'
 import {UnderlineItemList, UnderlineWrapper, LoadingCounter, GAP} from '../internal/components/UnderlineTabbedInterface'
 import styled from 'styled-components'
 import {Button} from '../Button'
@@ -161,7 +160,6 @@ export const UnderlineNav = forwardRef(
     const containerRef = React.useRef<HTMLUListElement>(null)
     const disclosureWidgetId = useId()
 
-    const {theme} = useTheme()
     const [isWidgetOpen, setIsWidgetOpen] = useState(false)
     const [iconsVisible, setIconsVisible] = useState<boolean>(true)
     const [childWidthArray, setChildWidthArray] = useState<ChildWidthArray>([])
@@ -308,7 +306,6 @@ export const UnderlineNav = forwardRef(
     return (
       <UnderlineNavContext.Provider
         value={{
-          theme,
           setChildrenWidth,
           setNoIconChildrenWidth,
           loadingCounters,
@@ -328,7 +325,7 @@ export const UnderlineNav = forwardRef(
             {listItems}
             {menuItems.length > 0 && (
               <MoreMenuListItem ref={moreMenuRef}>
-                {!onlyMenuVisible && <Box sx={getDividerStyle(theme)}></Box>}
+                {!onlyMenuVisible && <Box sx={dividerStyles}></Box>}
                 <Button
                   ref={moreMenuBtnRef}
                   sx={moreBtnStyles}
diff --git a/packages/react/src/UnderlineNav/UnderlineNavContext.tsx b/packages/react/src/UnderlineNav/UnderlineNavContext.tsx
index e593c179d76..f276771efac 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavContext.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavContext.tsx
@@ -1,15 +1,12 @@
 import type React from 'react'
 import {createContext} from 'react'
-import type {Theme} from '../ThemeProvider'
 
 export const UnderlineNavContext = createContext<{
-  theme: Theme | undefined
   setChildrenWidth: React.Dispatch<{text: string; width: number}>
   setNoIconChildrenWidth: React.Dispatch<{text: string; width: number}>
   loadingCounters: boolean
   iconsVisible: boolean
 }>({
-  theme: {},
   setChildrenWidth: () => null,
   setNoIconChildrenWidth: () => null,
   loadingCounters: false,
diff --git a/packages/react/src/UnderlineNav/styles.ts b/packages/react/src/UnderlineNav/styles.ts
index 227a66e20fa..cc0ff089489 100644
--- a/packages/react/src/UnderlineNav/styles.ts
+++ b/packages/react/src/UnderlineNav/styles.ts
@@ -1,15 +1,14 @@
-import type {Theme} from '../ThemeProvider'
 import type {BetterSystemStyleObject} from '../sx'
 import {getAnchoredPosition} from '@primer/behaviors'
 
-export const getDividerStyle = (theme?: Theme) => ({
+export const dividerStyles = {
   display: 'inline-block',
   borderLeft: '1px solid',
   width: '1px',
-  borderLeftColor: `${theme?.colors.border.muted}`,
+  borderLeftColor: `var(--borderColor-muted)`,
   marginRight: 1,
   height: '24px', // The height of the divider - reference from Figma
-})
+}
 
 export const moreBtnStyles = {
   //set margin 0 here because safari puts extra margin around the button, rest is to reset style to make it look like a list element

From aa36737d3bae9e207c2d0843d953d134ea860e1e Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 19 Sep 2025 14:03:30 +0200
Subject: [PATCH 4/9] Update useFocusZone.stories.tsx

---
 packages/react/src/stories/useFocusZone.stories.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx
index 9f774fb88f7..5d00567fda7 100644
--- a/packages/react/src/stories/useFocusZone.stories.tsx
+++ b/packages/react/src/stories/useFocusZone.stories.tsx
@@ -6,7 +6,6 @@ import Link from '../Link'
 import {FocusKeys} from '@primer/behaviors'
 import type {Direction} from '@primer/behaviors'
 import {useFocusZone} from '../hooks/useFocusZone'
-import {useTheme} from '../ThemeProvider'
 import classes from './FocusZoneStories.module.css'
 
 export default {
@@ -482,7 +481,6 @@ export const ActiveDescendant = () => {
 
   const containerRef = useRef<HTMLElement>(null)
   const controllingElementRef = useRef<HTMLElement>(null)
-  const {theme: themeFromContext} = useTheme()
 
   useFocusZone({
     containerRef,
@@ -490,7 +488,7 @@ export const ActiveDescendant = () => {
     bindKeys: FocusKeys.ArrowVertical,
     onActiveDescendantChanged: (current, previous) => {
       if (current) {
-        current.style.outline = `2px solid ${themeFromContext?.colors.accent.fg}`
+        current.style.outline = `2px solid var(--fgColor-accent)`
       }
       if (previous) {
         previous.style.outline = ''

From 1517b7a0bc375c0813f266a74c7c7fcdbeb40790 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 19 Sep 2025 14:35:42 +0200
Subject: [PATCH 5/9] Update SegmentedControl.tsx

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

diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
index f0e3ce38fd0..96246dcc6cc 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -176,7 +176,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
           selected: index === selectedIndex,
           style: {
             '--separator-color':
-              index === selectedIndex || index === selectedIndex - 1 ? 'transparent' : theme?.colors.border.default,
+              index === selectedIndex || index === selectedIndex - 1 ? 'transparent' : 'var(--borderColor-default)',
             ...child.props.style,
           },
         }

From fe9f69983bc19e7a0d8211d76ea77699d4ee9c70 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 19 Sep 2025 14:36:11 +0200
Subject: [PATCH 6/9] Update SegmentedControl.tsx

---
 packages/react/src/SegmentedControl/SegmentedControl.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
index 96246dcc6cc..276d1f194e5 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -5,7 +5,6 @@ import type {SegmentedControlIconButtonProps} from './SegmentedControlIconButton
 import SegmentedControlIconButton from './SegmentedControlIconButton'
 import {ActionList} from '../ActionList'
 import {ActionMenu} from '../ActionMenu'
-import {useTheme} from '../ThemeProvider'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {useResponsiveValue} from '../hooks/useResponsiveValue'
 import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
@@ -40,7 +39,6 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   ...rest
 }) => {
   const segmentedControlContainerRef = useRef<HTMLUListElement>(null)
-  const {theme} = useTheme()
   const isUncontrolled =
     onChange === undefined ||
     React.Children.toArray(children).some(

From 73f4894ea732dbe999d5d326835953adc78bd9d1 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 19 Sep 2025 14:39:40 +0200
Subject: [PATCH 7/9] Update LabelGroup.tsx

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

diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index 54b3d184c42..bc95aaf839d 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -6,7 +6,7 @@ import {get} from '../constants'
 import VisuallyHidden from '../_VisuallyHidden'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button, IconButton} from '../Button'
-import {useTheme} from '../ThemeProvider'
+import theme from '../theme'
 
 export type LabelGroupProps = {
   /** Customize the element type of the rendered container */
@@ -170,9 +170,7 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
     toJSON: () => undefined,
   })
 
-  const {theme} = useTheme()
-
-  const overlayPaddingPx = parseInt(get('space.2')(theme), 10)
+  const overlayPaddingPx = parseInt(theme.space[2], 10)
 
   const hiddenItemIds = Object.keys(visibilityMap).filter(key => !visibilityMap[key])
 

From f0b733ea621db05b6aa007ced40b3f07cccb4f76 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 19 Sep 2025 14:39:48 +0200
Subject: [PATCH 8/9] Overlay: use theme instead of hardcoding>?

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

diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 7b661537e1f..4ba24fbb92d 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -193,7 +193,7 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
   ): ReactElement => {
     const overlayRef = useRef<HTMLDivElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, overlayRef)
-    const slideAnimationDistance = 8 // hardcoded value for --base-size-2 or theme.space[2]
+    const slideAnimationDistance = parseInt(theme.space[2], 10)
     const slideAnimationEasing = theme.animation.easeOutCubic
 
     useOverlay({

From b81af99500089d70becfc2b0674026aa660a3e21 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 6 Oct 2025 14:17:38 +0200
Subject: [PATCH 9/9] add changeset

---
 .changeset/replace-usetheme-with-theme.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/replace-usetheme-with-theme.md

diff --git a/.changeset/replace-usetheme-with-theme.md b/.changeset/replace-usetheme-with-theme.md
new file mode 100644
index 00000000000..7ca53d2be74
--- /dev/null
+++ b/.changeset/replace-usetheme-with-theme.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Replaces `useTheme` usage with `theme`. If an application uses a custom theme that modifies one of the following 5 tokens, they will be reset to the default theme values. (`space.2, colors.success.fg, colors.border.default, colors.border.muted, animation.easeOutCubic`)