Skip to content

fix(regression-test): pair the theme page surface with its text color #2670

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
drakeaharper wants to merge 2 commits into from
+30 −9
Closed

fix(regression-test): pair the theme page surface with its text color #2670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
579f2bb
fix(regression-test): pair the theme page surface with its text color
drakeaharper Jul 30, 2026
bd520db
fix(regression-test): remove hardcoded colors from demo pages
drakeaharper Jul 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions regression-test/src/app/custom-icons/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ function IconGrid({
<Icon size={size} color={color} title={name} />
<span
style={{ fontSize: '15px' }}
className="text-gray-500 text-center leading-tight"
className="text-center leading-tight"
>
{name.replace('InstUIIcon_', '')}
</span>
Expand All @@ -121,7 +121,7 @@ function SizeRow({
{SIZES.map((size) => (
<div key={size} className="flex flex-col items-center gap-1 p-1">
<Icon size={size} color={color} title={name} />
<span style={{ fontSize: '15px' }} className="text-gray-500">
<span style={{ fontSize: '15px' }} className="">
{size}
</span>
</div>
Expand All @@ -132,7 +132,7 @@ function SizeRow({

function SectionHeader({ children }: { children: React.ReactNode }) {
return (
<p className="text-xs font-bold mt-7 mb-2 pb-1 border-b border-gray-300 text-gray-700">
<p className="text-xs font-bold mt-7 mb-2 pb-1 border-b border-gray-300">
{children}
</p>
)
Expand Down
14 changes: 12 additions & 2 deletions regression-test/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,14 +87,20 @@ export default function RootLayout({
? newTheme.semantics(newTheme.primitives)
: newTheme?.semantics
const pageBackground = semantics?.color?.background?.page ?? 'transparent'
// Pair the surface with the theme's own text color. Painting only the
// background leaves inherited text at its default dark value, which on the
// dark theme's near-black surface is a serious color-contrast violation for
// every plain label on these pages and for any component using
// `color="inherit"`.
const pageColor = semantics?.color?.text?.base ?? 'inherit'

return (
// we need to make a new Map to reset counting on the server side
// on each page refresh TODO fix
<html
lang="en"
data-theme={themeKey}
style={{ background: pageBackground }}
style={{ background: pageBackground, color: pageColor }}
>
<head>
<title>Component visual and regression test suite</title>
Expand All @@ -111,7 +117,11 @@ export default function RootLayout({
in the captured baselines. */}
<body
className={inter.className}
style={{ background: pageBackground, minHeight: '100vh' }}
style={{
background: pageBackground,
color: pageColor,
minHeight: '100vh'
}}
>
{children}
</body>
Expand Down
10 changes: 7 additions & 3 deletions regression-test/src/app/small-components/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export default function SmallComponentsPage() {
<Text variant="contentImportant"> contentImportant </Text>
</div>
<div>
<span style={{ color: '#AA0000' }}>
<span style={{ color: '#AA0000', background: '#ffffff' }}>
<Text color="inherit"> inherit </Text>
</span>
<Text variant="contentQuote"> contentQuote </Text>
Expand All @@ -138,10 +138,14 @@ export default function SmallComponentsPage() {
<Text color="warning">I&#39;m warning text</Text>
<Text color="danger">I&#39;m danger text</Text>
<Text color="ai-highlight">I&#39;m an ai-highlight text</Text>
<Text color="primary-inverse">I&#39;m primary-inverse text</Text>
<span style={{ background: '#1c222b' }}>
<Text color="primary-inverse">I&#39;m primary-inverse text</Text>
</span>
</div>
<div>
<Text color="secondary-inverse">I&#39;m secondary-inverse text</Text>
<span style={{ background: '#1c222b' }}>
<Text color="secondary-inverse">I&#39;m secondary-inverse text</Text>
</span>
<Text color="primary-on">I&#39;m primary-on text</Text>
<Text color="secondary-on">I&#39;m secondary-on text</Text>
</div>
Expand Down
9 changes: 8 additions & 1 deletion regression-test/src/app/tooltip/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,14 @@ export default function TooltipPage() {
<Flex.Item>Flex Three</Flex.Item>
</Flex>,
<FormField id="foo" label="This is a FormField" width="200px">
<input style={{ display: 'block', width: '100%' }} />
<input
style={{
display: 'block',
width: '100%',
color: '#273540',
background: '#ffffff'
}}
/>
</FormField>,
<Heading>Default Heading</Heading>,
<IconButton screenReaderLabel="Add User">
Expand Down
Loading