Skip to content

[BUG] [1.1.0] var(--cortex-success)20 / var(--cortex-error)20 background syntax is invalid unless tokens are 6-digit hex #37642

@goro-svg

Description

@goro-svg

Project

cortex

Description

In SystemSpecsDialog (src/components/SystemSpecs.tsx), backgrounds use the string var(--cortex-success)20 (and var(--cortex-error)20 on the same line as the extension badge). That relies on the browser treating the token as a hex color and appending 20 as an 8-digit hex alpha suffix. That only works when --cortex-success / --cortex-error resolve to a #RRGGBB form. If those variables are rgb(), hsl(), oklch(), or a named color, the combined value is not valid CSS, so the background may be dropped or behave unpredictably across themes.

Error Message

Debug Logs

System Information

OS: Ubuntu · Bounty Challenge: v1.1.0

Screenshots

Image

Steps to Reproduce

Open Help → About with extensions listed (for the badge), or copy to clipboard to trigger the Copied! state.
In DevTools, inspect the extension enabled/disabled pill (line 339) and the Copy for Bug Report button after copy (line 378).
Check Computed background for var(--cortex-success)20 / var(--cortex-error)20.
Temporarily define --cortex-success as rgb(34, 197, 94) in theme CSS and reload: the constructed value is invalid.

Expected Behavior

Tinted surfaces should use a robust approach: e.g. color-mix(in srgb, var(--cortex-success) 12%, transparent), a dedicated --cortex-success-bg token, or another pattern that works for any color syntax the theme uses.

Actual Behavior

Lines 339 (extension status badge) and 378 (Copied! button) use var(--cortex-success)20; line 339 also uses var(--cortex-error)20 for the disabled badge — all fragile unless tokens stay hex.

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingduplicateThis issue or pull request already existsideIssues related to IDE

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions