From 579f2bbaf8cb9d538589fc4a7a667e1291b15011 Mon Sep 17 00:00:00 2001 From: Drake Harper Date: Thu, 30 Jul 2026 13:00:57 -0600 Subject: [PATCH 1/2] fix(regression-test): pair the theme page surface with its text color Painting the page from `background.page` without also setting the theme's own text color leaves inherited text at its default dark value. On the dark theme's near-black surface (#10141A) that is a serious color-contrast violation for every plain label on these pages and for any component using `color="inherit"`. Set `color` from `text.base` alongside the background, on both and , so each theme is captured with a foreground that belongs to it. This is why the Visual regression job has been failing on every branch since 2026-07-27: a1e26e3a9 introduced the per-theme surface and 99746bfa5 started running the a11y check across all three themes, so the unpaired foreground began failing the suite. Verified locally against the full spec: 13 failures before, 6 after. --- regression-test/src/app/layout.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/regression-test/src/app/layout.tsx b/regression-test/src/app/layout.tsx index 19a49e4066..bf0f2d3cdd 100644 --- a/regression-test/src/app/layout.tsx +++ b/regression-test/src/app/layout.tsx @@ -87,6 +87,12 @@ 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 @@ -94,7 +100,7 @@ export default function RootLayout({ Component visual and regression test suite @@ -111,7 +117,11 @@ export default function RootLayout({ in the captured baselines. */} {children} From bd520db2c88f9723304d2fdc94536efc176660f6 Mon Sep 17 00:00:00 2001 From: Drake Harper Date: Thu, 30 Jul 2026 16:20:53 -0600 Subject: [PATCH 2/2] fix(regression-test): remove hardcoded colors from demo pages Three demo pages hardcode colors that only work on a light surface, so they fail contrast once the suite renders each theme on its own background: - custom-icons used Tailwind `text-gray-500` / `text-gray-700`, which are 4.38:1 on the light surface and 1.79:1 on the dark one. Dropping the classes lets the labels inherit the theme's text color. - small-components demonstrates `Text color="inherit"` inside a hardcoded `#AA0000` span, which is 2.38:1 on the dark surface. Giving that span an explicit white background keeps the demo's point while making its contrast deterministic. - tooltip renders a bare `` with no color, so it inherited the page's light text while keeping the user-agent's white background (1.13:1). Now sets both explicitly. Takes the suite from 13 failures to 4. The remaining 4 are InstUI components on View background variants and are not harness bugs - see the PR discussion. --- regression-test/src/app/custom-icons/page.tsx | 6 +++--- regression-test/src/app/small-components/page.tsx | 10 +++++++--- regression-test/src/app/tooltip/page.tsx | 9 ++++++++- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/regression-test/src/app/custom-icons/page.tsx b/regression-test/src/app/custom-icons/page.tsx index 9d9b5708fe..d296e5943f 100644 --- a/regression-test/src/app/custom-icons/page.tsx +++ b/regression-test/src/app/custom-icons/page.tsx @@ -97,7 +97,7 @@ function IconGrid({ {name.replace('InstUIIcon_', '')} @@ -121,7 +121,7 @@ function SizeRow({ {SIZES.map((size) => (
- + {size}
@@ -132,7 +132,7 @@ function SizeRow({ function SectionHeader({ children }: { children: React.ReactNode }) { return ( -

+

{children}

) diff --git a/regression-test/src/app/small-components/page.tsx b/regression-test/src/app/small-components/page.tsx index 38d07a9cad..be8618fd63 100644 --- a/regression-test/src/app/small-components/page.tsx +++ b/regression-test/src/app/small-components/page.tsx @@ -121,7 +121,7 @@ export default function SmallComponentsPage() { contentImportant
- + inherit contentQuote @@ -138,10 +138,14 @@ export default function SmallComponentsPage() { I'm warning text I'm danger text I'm an ai-highlight text - I'm primary-inverse text + + I'm primary-inverse text +
- I'm secondary-inverse text + + I'm secondary-inverse text + I'm primary-on text I'm secondary-on text
diff --git a/regression-test/src/app/tooltip/page.tsx b/regression-test/src/app/tooltip/page.tsx index d36f4523f5..05053d2c42 100644 --- a/regression-test/src/app/tooltip/page.tsx +++ b/regression-test/src/app/tooltip/page.tsx @@ -145,7 +145,14 @@ export default function TooltipPage() { Flex Three , - + , Default Heading,