[BUG] [v1.1.0] About Cortex Desktop (SystemSpecs): labels and secondary text use Tailwind text-neutral-* / text-red-400 instead of Cortex text/error tokens

[hiroshi81-J]

Project

ide

Description

SystemSpecsDialog in src/components/SystemSpecs.tsx styles many strings with fixed Tailwind palette classes (text-neutral-400, text-neutral-500, text-red-400). Those colors do not follow the app’s CSS variable theme (var(--cortex-text-secondary), var(--cortex-text-inactive) or tertiary, var(--cortex-error), etc.), so contrast and hue can drift from the rest of the IDE when the user changes theme or when tokens are updated.

Error Message

Debug Logs

System Information

Cortex IDE: v1.1.0 · OS: Ubuntu · Bounty Challenge: v1.1.0

Screenshots

Steps to Reproduce

Open Help → About (system specs dialog).
Open DevTools → Elements and inspect subtitle lines (version under title, section labels like “Operating System”, helper text, error text, “Live updates”, extension version).
Note Computed styles come from Tailwind neutral / red utilities, not var(--cortex-…) tokens.

Expected Behavior

Secondary, inactive, and error text use semantic Cortex tokens (or shared utility classes mapped to them) so the About dialog matches global theming.

Actual Behavior

Multiple nodes use text-neutral-400, text-neutral-500, and text-red-400

Additional Context

No response

[hinzwilliam52-ship-it]

I've identified a potential fix for this and am preparing a Pull Request. I'll post the link here in a moment.

[hinzwilliam52-ship-it]

Here is a suggested fix for this issue:

To fix the issue, we need to replace the Tailwind palette classes with the Cortex text/error tokens in the SystemSpecs.tsx file.

Here's the exact code fix:

Replace the following lines:

className="text-neutral-400"
className="text-neutral-500"
className="text-red-400"

With:

className="text-secondary" // for secondary text
className="text-inactive" // for inactive text
className="text-error" // for error text

Or, if you want to use the Cortex CSS variable theme:

style={{ color: 'var(--cortex-text-secondary)' }} // for secondary text
style={{ color: 'var(--cortex-text-inactive)' }} // for inactive text
style={{ color: 'var(--cortex-error)' }} // for error text

Make sure to update all occurrences of text-neutral-400, text-neutral-500, and text-red-400 in the SystemSpecs.tsx file.

Here's an example of how the updated code might look:

// Before
<div className="text-neutral-400">Secondary text</div>
<div className="text-neutral-500">Inactive text</div>
<div className="text-red-400">Error text</div>

// After
<div className="text-secondary">Secondary text</div>
<div className="text-inactive">Inactive text</div>
<div className="text-error">Error text</div>

Or:

// Before
<div className="text-neutral-400">Secondary text</div>
<div className="text-neutral-500">Inactive text</div>
<div className="text-red-400">Error text</div>

// After
<div style={{ color: 'var(--cortex-text-secondary)' }}>Secondary text</div>
<div style={{ color: 'var(--cortex-text-inactive)' }}>Inactive text</div>
<div style={{ color: 'var(--cortex-error)' }}>Error text</div>

Hope this helps!

[echobt]

✅ Validated

VALID bug report. The screenshot shows the About Cortex Desktop dialog with DevTools inspecting elements that use hardcoded Tailwind classes (text-neutral-400, text-neutral-500, text-red-400) instead of Cortex theme tokens. Verified in src/components/SystemSpecs.tsx: 10 occurrences of text-neutral-400, 5 of text-neutral-500, and 1 of text-red-400. These should use semantic tokens like var(--cortex-text-secondary), var(--cortex-text-inactive), and var(--cortex-error). Component is accessible via Help → About Cortex menu. While similar to #21003 (same component), that issue covers PRIMARY text (text-white) and invalid CSS syntax, whereas this issue covers SECONDARY/ERROR text - distinct problems requiring separate fixes.

[hinzwilliam52-ship-it]

I've identified a potential fix for this and am preparing a Pull Request. I'll post the link here in a moment.

[hinzwilliam52-ship-it]

I have opened a Pull Request with the fix here: #37649

Thanks!