diff --git a/.changeset/empty-oranges-hear.md b/.changeset/empty-oranges-hear.md
new file mode 100644
index 00000000000..408daa9779f
--- /dev/null
+++ b/.changeset/empty-oranges-hear.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Feature flags: Remove feature flag `primer_react_use_styled_react_theming`
diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
index 7a1112d7e37..f60c9687834 100644
--- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
+++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
@@ -8,5 +8,4 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
primer_react_select_panel_fullscreen_on_narrow: false,
primer_react_select_panel_order_selected_at_top: false,
primer_react_select_panel_remove_active_descendant: false,
- primer_react_use_styled_react_theming: false,
})
diff --git a/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx b/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx
index afb82cab2dd..8e269dfe690 100644
--- a/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx
@@ -2,7 +2,6 @@ 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 {FeatureFlags} from '@primer/react/experimental'
import {ThemeProvider, useColorSchemeVar, useTheme, Box} from '../'
// window.matchMedia() is not implemented by JSDOM so we have to create a mock:
@@ -53,13 +52,11 @@ it('respects theme prop', () => {
}
render(
-
-
-
- Hello
-
-
- ,
+
+
+ Hello
+
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('color: #f00')
@@ -68,13 +65,11 @@ it('respects theme prop', () => {
it('has default theme', () => {
render(
-
-
-
- Hello
-
-
- ,
+
+
+ Hello
+
+ ,
)
expect(screen.getByText('Hello')).toMatchSnapshot()
@@ -82,13 +77,11 @@ it('has default theme', () => {
it('inherits theme from parent', () => {
render(
-
-
-
- Hello
-
+
+
+ Hello
- ,
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
@@ -96,11 +89,9 @@ it('inherits theme from parent', () => {
it('defaults to light color scheme', () => {
render(
-
-
- Hello
-
- ,
+
+ Hello
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
@@ -108,11 +99,9 @@ it('defaults to light color scheme', () => {
it('defaults to dark color scheme in night mode', () => {
render(
-
-
- Hello
-
- ,
+
+ Hello
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
@@ -122,11 +111,9 @@ it('defaults to first color scheme when passed an invalid color scheme name', ()
const spy = vi.spyOn(console, 'error').mockImplementationOnce(() => {})
render(
-
-
- Hello
-
- ,
+
+ Hello
+ ,
)
expect(spy).toHaveBeenCalledWith('`foo` scheme not defined in `theme.colorSchemes`')
@@ -137,11 +124,9 @@ it('defaults to first color scheme when passed an invalid color scheme name', ()
it('respects nightScheme prop', () => {
render(
-
-
- Hello
-
- ,
+
+ Hello
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
@@ -149,11 +134,9 @@ it('respects nightScheme prop', () => {
it('respects nightScheme prop with colorMode="dark"', () => {
render(
-
-
- Hello
-
- ,
+
+ Hello
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
@@ -161,11 +144,9 @@ it('respects nightScheme prop with colorMode="dark"', () => {
it('respects dayScheme prop', () => {
render(
-
-
- Hello
-
- ,
+
+ Hello
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
@@ -173,11 +154,9 @@ it('respects dayScheme prop', () => {
it('respects dayScheme prop with colorMode="light"', () => {
render(
-
-
- Hello
-
- ,
+
+ Hello
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
@@ -185,11 +164,9 @@ it('respects dayScheme prop with colorMode="light"', () => {
it('works in auto mode', () => {
render(
-
-
- Hello
-
- ,
+
+ Hello
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
@@ -208,11 +185,9 @@ it('works in auto mode (dark)', () => {
}))
render(
-
-
- Hello
-
- ,
+
+ Hello
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
@@ -226,14 +201,12 @@ it('updates when colorMode prop changes', async () => {
function App() {
const [colorMode, setColorMode] = React.useState<'day' | 'night'>('day')
return (
-
-
- {colorMode}
-
-
-
+
+ {colorMode}
+
+
)
}
@@ -256,14 +229,12 @@ it('updates when dayScheme prop changes', async () => {
function App() {
const [dayScheme, setDayScheme] = React.useState('light')
return (
-
-
- {dayScheme}
-
-
-
+
+ {dayScheme}
+
+
)
}
@@ -286,14 +257,12 @@ it('updates when nightScheme prop changes', async () => {
function App() {
const [nightScheme, setNightScheme] = React.useState('dark')
return (
-
-
- {nightScheme}
-
-
-
+
+ {nightScheme}
+
+
)
}
@@ -316,16 +285,14 @@ it('inherits colorMode from parent', async () => {
function App() {
const [colorMode, setcolorMode] = React.useState<'day' | 'night'>('day')
return (
-
-
-
-
- {colorMode}
-
+
+
+
+ {colorMode}
-
+
)
}
@@ -344,16 +311,14 @@ it('inherits dayScheme from parent', async () => {
function App() {
const [dayScheme, setDayScheme] = React.useState('light')
return (
-
-
-
-
- {dayScheme}
-
+
+
+
+ {dayScheme}
-
+
)
}
@@ -372,16 +337,14 @@ it('inherits nightScheme from parent', async () => {
function App() {
const [nightScheme, setNightScheme] = React.useState('dark')
return (
-
-
-
-
- {nightScheme}
-
+
+
+
+ {nightScheme}
-
+
)
}
@@ -408,12 +371,10 @@ describe('setColorMode', () => {
}
render(
-
-
- Hello
-
-
- ,
+
+ Hello
+
+ ,
)
// starts in day mode (light scheme)
@@ -440,12 +401,10 @@ describe('setDayScheme', () => {
}
render(
-
-
- Hello
-
-
- ,
+
+ Hello
+
+ ,
)
// starts in day mode (light scheme)
@@ -472,12 +431,10 @@ describe('setNightScheme', () => {
}
render(
-
-
- Hello
-
-
- ,
+
+ Hello
+
+ ,
)
// starts in night mode (dark scheme)
@@ -517,12 +474,10 @@ describe('useColorSchemeVar', () => {
}
render(
-
-
-
-
-
- ,
+
+
+
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('background-color: rgb(255, 0, 0)')
@@ -551,12 +506,10 @@ describe('useColorSchemeVar', () => {
}
render(
-
-
-
-
-
- ,
+
+
+
+ ,
)
expect(screen.getByText('Hello')).toHaveStyle('background-color: rgb(255, 0, 0)')
@@ -588,11 +541,9 @@ describe('useTheme().resolvedColorScheme', () => {
}
render(
-
-
-
-
- ,
+
+
+ ,
)
expect(screen.getByTestId('text').textContent).toEqual('')
@@ -608,11 +559,9 @@ describe('useTheme().resolvedColorScheme', () => {
const schemeToApply = 'dark'
render(
-
-
-
-
- ,
+
+
+ ,
)
expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
@@ -629,11 +578,9 @@ describe('useTheme().resolvedColorScheme', () => {
const schemeToApply = 'totally-invalid-colorscheme'
render(
-
-
-
-
- ,
+
+
+ ,
)
const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
@@ -657,15 +604,11 @@ describe('useTheme().resolvedColorScheme', () => {
const schemeToApply = 'dark'
render(
-
-
-
-
-
-
-
+
+
+
- ,
+ ,
)
expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
@@ -683,15 +626,11 @@ describe('useTheme().resolvedColorScheme', () => {
const schemeToApply = 'totally-invalid-colorscheme'
render(
-
-
-
-
-
-
-
+
+
+
- ,
+ ,
)
const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]