Project
ide
Description
Two span elements in the image viewer editor toolbar (src/components/editor/ImageViewer.tsx, lines 173 and 187) set their text color using color: var(--text-base). In the design token system, --text-base is defined as 14px in design-tokens.css — a font-size value, not a color. Both declarations are invalid CSS and the browser silently discards them. The affected elements are the filename label on the left side of the toolbar and the zoom percentage indicator between the zoom-in and zoom-out buttons. Both fall back to an inherited foreground color instead of the intended theme value, which can cause them to appear inconsistently colored or blend into the toolbar background depending on the active theme.
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 and open any image file (PNG, JPEG, SVG, etc.) in the editor.
The image viewer opens with a toolbar at the top showing the filename and zoom controls.
Open DevTools → Elements and inspect the filename on the left of the toolbar (line 173).
Check the computed color value on that element.
Next inspect the zoom percentage between the zoom buttons (line 187) and check its computed color.
Expected Behavior
The filename label and the zoom percentage indicator should both render in the primary text color defined by the active theme (--cortex-text-primary). Both labels should remain clearly visible against the var(--surface-base) toolbar background in all themes.
Actual Behavior
color: var(--text-base) resolves to 14px on both the filename and the zoom percentage , so the browser drops both declarations. Both elements inherit a foreground color from an ancestor instead of using the intended token. Depending on the active theme this means the open file name and the current zoom level — the two most informative pieces of text in the viewer toolbar — can render in an unintended color, reducing readability and theme consistency.
Additional Context
No response
Project
ide
Description
Two span elements in the image viewer editor toolbar (src/components/editor/ImageViewer.tsx, lines 173 and 187) set their text color using color: var(--text-base). In the design token system, --text-base is defined as 14px in design-tokens.css — a font-size value, not a color. Both declarations are invalid CSS and the browser silently discards them. The affected elements are the filename label on the left side of the toolbar and the zoom percentage indicator between the zoom-in and zoom-out buttons. Both fall back to an inherited foreground color instead of the intended theme value, which can cause them to appear inconsistently colored or blend into the toolbar background depending on the active theme.
Error Message
Debug Logs
System Information
Screenshots
Steps to Reproduce
Open Cortex IDE and open any image file (PNG, JPEG, SVG, etc.) in the editor.
The image viewer opens with a toolbar at the top showing the filename and zoom controls.
Open DevTools → Elements and inspect the filename on the left of the toolbar (line 173).
Check the computed color value on that element.
Next inspect the zoom percentage between the zoom buttons (line 187) and check its computed color.
Expected Behavior
The filename label and the zoom percentage indicator should both render in the primary text color defined by the active theme (--cortex-text-primary). Both labels should remain clearly visible against the var(--surface-base) toolbar background in all themes.
Actual Behavior
color: var(--text-base) resolves to 14px on both the filename and the zoom percentage , so the browser drops both declarations. Both elements inherit a foreground color from an ancestor instead of using the intended token. Depending on the active theme this means the open file name and the current zoom level — the two most informative pieces of text in the viewer toolbar — can render in an unintended color, reducing readability and theme consistency.
Additional Context
No response