-
Notifications
You must be signed in to change notification settings - Fork 28
Description
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.0Screenshots
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