test(token-highlight): add regression test

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -247,11 +247,6 @@
 						var(--l2-background)
 					) !important;
 
-					&,
-					.ͼ1a {
-						color: var(--query-builder-v2-color, var(--l2-foreground));
-					}
-
 					::-moz-selection {
 						background: var(
 							--query-builder-v2-selection-background-color,

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -293,11 +293,6 @@ $max-recents-shown: 5;
 				var(--l2-background)
 			) !important;
 
-			&,
-			.ͼ1a {
-				color: var(--query-builder-v2-color, var(--l2-foreground));
-			}
-
 			::-moz-selection {
 				background: var(
 					--query-builder-v2-selection-background-color,

tests/e2e/tests/query-builder/token-highlight.spec.ts

@@ -0,0 +1,81 @@
+import { expect, test } from '../../fixtures/auth';
+import {
+	setupTheme,
+	tokenColor,
+	typeExpression,
+} from '@tests/query-builder/utils';
+
+const SPANS = '.query-where-clause-editor .cm-line span';
+const LOGS_EXPLORER = '/logs/logs-explorer';
+
+type ThemeConfig = {
+	name: string;
+	theme: 'dark' | 'light';
+	colors: {
+		identifier: string;
+		operator: string;
+		property: string;
+		string: string;
+	};
+};
+
+const THEMES: ThemeConfig[] = [
+	{
+		name: 'dark (copilot)',
+		theme: 'dark',
+		colors: {
+			identifier: 'rgb(147, 157, 165)',
+			operator: 'rgb(186, 142, 247)',
+			property: 'rgb(255, 234, 107)',
+			string: 'rgb(91, 236, 149)',
+		},
+	},
+	{
+		name: 'light (githubLight)',
+		theme: 'light',
+		colors: {
+			identifier: 'rgb(0, 92, 197)',
+			operator: 'rgb(0, 92, 197)',
+			property: 'rgb(111, 66, 193)',
+			string: 'rgb(3, 47, 98)',
+		},
+	},
+];
+
+for (const { name, theme, colors } of THEMES) {
+	test.describe(`QueryBuilder token highlighting — ${name}`, () => {
+		test(`k8s.namespace.name — each segment gets its own color`, async ({
+			authedPage: page,
+		}) => {
+			await setupTheme(page, theme);
+			await page.goto(LOGS_EXPLORER);
+			await typeExpression(page, 'k8s.namespace.name');
+
+			expect(await tokenColor(page, 'k8s')).toBe(colors.identifier);
+			expect(await tokenColor(page, '.')).toBe(colors.operator);
+			expect(await tokenColor(page, 'namespace')).toBe(colors.property);
+			expect(await tokenColor(page, 'name')).toBe(colors.property);
+		});
+
+		test(`['value', 'value'] — string tokens have native theme color`, async ({
+			authedPage: page,
+		}) => {
+			await setupTheme(page, theme);
+			await page.goto(LOGS_EXPLORER);
+			await typeExpression(page, "['value', 'value']");
+
+			const allStringColors: string[] = await page.evaluate(
+				({ selector, text }) =>
+					Array.from(document.querySelectorAll<HTMLSpanElement>(selector))
+						.filter((el) => el.textContent === text)
+						.map((el) => window.getComputedStyle(el).color),
+				{ selector: SPANS, text: "'value'" },
+			);
+
+			expect(allStringColors.length).toBe(2);
+			for (const color of allStringColors) {
+				expect(color).toBe(colors.string);
+			}
+		});
+	});
+}

tests/e2e/tests/query-builder/utils.ts

@@ -0,0 +1,37 @@
+import { Page } from '@playwright/test';
+import { expect, test } from '../../fixtures/auth';
+
+const EDITOR_CONTENT = '.query-where-clause-editor .cm-content';
+const SPANS = '.query-where-clause-editor .cm-line span';
+
+export async function typeExpression(page: Page, expr: string): Promise<void> {
+	const editor = page.locator(EDITOR_CONTENT).first();
+	await editor.waitFor({ state: 'visible', timeout: 15_000 });
+	await editor.click();
+	await page.keyboard.press('ControlOrMeta+a');
+	await page.keyboard.press('Delete');
+	await page.keyboard.type(expr);
+	await page.waitForTimeout(300);
+}
+
+export async function tokenColor(
+	page: Page,
+	text: string,
+): Promise<string | null> {
+	return page.evaluate(
+		({ selector, target }) => {
+			const el = Array.from(
+				document.querySelectorAll<HTMLSpanElement>(selector),
+			).find((s) => s.textContent === target);
+			return el ? window.getComputedStyle(el).color : null;
+		},
+		{ selector: SPANS, target: text },
+	);
+}
+
+export async function setupTheme(
+	page: Page,
+	theme: 'dark' | 'light',
+): Promise<void> {
+	await page.addInitScript((t) => localStorage.setItem('THEME', t), theme);
+}