[BUG] [v1.1.0] CoverageBars label uses --text-base as a color — resolves to 14px (font-size token), not a color

[yandez-hon]

Project

ide

Description

The coverage bar label in CoverageBars.tsx (line 200) sets its text color as color: var(--text-base). In the design token system, --text-base resolves to 14px — a font-size value, not a color. This makes color: 14px invalid CSS. The browser silently discards it and the coverage metric labels (Statements, Branches, Functions, Lines) fall back to an inherited color rather than the intended theme value, causing inconsistent rendering across themes.

Error Message

Debug Logs

System Information

Cortex IDE: v1.1.0
OS: Ubuntu 25.04
CPU: 13th Gen Intel Core i7-13650HX
RAM: 15 GB total

Screenshots

Steps to Reproduce

Open Cortex IDE.
Click Activity Bar → Testing.
Run tests with coverage enabled to populate the coverage bars.
Inspect any coverage bar label via DevTools.
Note that color: var(--text-base) resolves to 14px — an invalid CSS color value the browser silently discards.

Expected Behavior

The coverage bar label should use a valid color token such as var(--text-default) or var(--text-weak) so it renders with the correct foreground color and adapts to the active theme.

Actual Behavior

The at line 200 in CoverageBars.tsx applies color: var(--text-base), which resolves to 14px — an invalid CSS color. The browser discards the declaration and the coverage label inherits an unintended fallback color instead of the intended theme value.

Additional Context

No response

[echobt]

✅ Validated

VALID BUG - Confirmed in source code.

Bug Location: src/components/testing/CoverageBars.tsx at line 200
Code: <span style={{ color: "var(--text-base)" }}>{local.label}</span>

Root Cause: The --text-base CSS custom property is defined in src/styles/design-tokens.css (line 295) as --text-base: 14px; - this is a FONT-SIZE token, not a color token.

Impact: Using color: var(--text-base) resolves to color: 14px, which is invalid CSS. Browsers silently discard this declaration, causing the coverage metric labels (Statements, Branches, Functions, Lines) to inherit unintended fallback colors instead of the proper theme text color.

Component Accessibility: CoverageBars.tsx is a real, accessible component used in the Testing panel (imported by CoverageView.tsx and exported through the testing module). Users can access it by clicking the Testing icon in the Activity Bar and running tests with coverage enabled.

Not a Duplicate: While similar issues exist for other components (TestExplorer.tsx, BreakpointsView.tsx), this is a distinct bug instance in CoverageBars.tsx requiring its own fix.

[allornothingai]

I have fixed this issue as part of a batch ARIA and CSS fix PR in the Cortex IDE repository.

PR: CortexLM/cortex-ide#56

RTC Wallet: allornothingai

[allornothingai]

Just checking in on this bounty submission. Is there any further review required? If accepted, my payout wallet is:

0x0c67cbE9e30c66267975eE2D74Eb88036CA65e9F