test(components): pin the surface invariant and drop the class no component used

Author: ph33nx

packages/ui/src/utils/base-styles.ts

@@ -145,15 +145,6 @@ export const baseStyles = css`
 		font-size: var(--roxy-text-sm, 0.875rem);
 	}
 
-	/* Opt-in component backdrop. A component that paints content directly (table,
-	 * grid, prose) adds this to its root so it sits on an owned, theme-aware
-	 * surface rather than inheriting the page background, which may not match the
-	 * resolved token theme and would render text on a same-tone background. */
-	.roxy-surface {
-		background: var(--roxy-surface, #fff);
-		color: var(--roxy-fg, #0a0a0a);
-	}
-
 	:host(:focus-within) .roxy-card {
 		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 		outline-offset: 2px;

packages/ui/tests/components.test.ts

@@ -5,6 +5,8 @@ import { describe, expect, test } from 'bun:test';
 // so the order matters: setup -> import.
 import '../src/index.js';
 import { FAMILY_ORDER } from '../src/components/yoga-list.js';
+import { ROXY_COMPONENTS } from '../src/manifest.js';
+import { baseStyles } from '../src/utils/base-styles.js';
 
 /** `updateComplete` lives on LitElement, not on the `HTMLElement` that `createElement` returns, and every call site was reaching it through the same double cast. One helper, one place to change. */
 const settled = (el: Element): Promise<void> =>
@@ -5713,3 +5715,24 @@ describe('roxy-hd-penta draws the ladder', () => {
 		el.remove();
 	});
 });
+
+describe('component surfaces', () => {
+	// A component renders inside whatever container the page gives it, so its own
+	// root paints the surface instead of inheriting the page background. Shared
+	// base styles are excluded: they reach every component and would pass this
+	// for a component that paints nothing of its own.
+	test('every component paints a surface in its own styles', () => {
+		const unpainted = ROXY_COMPONENTS.filter((c) => {
+			const ctor = customElements.get(c.tag) as unknown as {
+				elementStyles?: ReadonlyArray<{ cssText: string }>;
+			};
+			const own = (ctor?.elementStyles ?? [])
+				.map((sheet) => sheet.cssText)
+				.filter((text) => text !== baseStyles.cssText);
+			return !/background:\s*var\(--roxy-(surface|bg)/.test(own.join('\n'));
+		}).map((c) => c.tag);
+
+		expect(ROXY_COMPONENTS.length).toBeGreaterThan(50);
+		expect(unpainted).toEqual([]);
+	});
+});