fix(ui): Use real design tokens so borders and surfaces render#92
Conversation
Three views referenced design tokens that do not exist, so browsers dropped the affected properties: invisible input borders in dark mode, transparent card surfaces, and inherited text colors. They now use the design system's actual tokens. The Agents header buttons also gain the standard gap, and the editor modal layers on the design system's modal z-index.
Code Review SummaryThis PR effectively addresses UI visibility issues in dark mode by replacing non-existent design tokens with the correct system tokens. It also improves layout consistency in the Agents header and correctly implements modal z-indexing. 🚀 Key Improvements
💡 Minor Suggestions
|
![sourceant[bot]](https://avatars.githubusercontent.com/in/1161781?s=60&v=4){kind=small}
| background: var(--surface-ground); | ||
| border: 1px solid var(--border-color); | ||
| background: var(--surface-sunken); | ||
| border: 1px solid var(--border); |
There was a problem hiding this comment.
Inconsistent border token. APIKeysView.vue and UsersView.vue consistently use var(--surface-border) (e.g., line 614 and 434 respectively), while AgentsView.vue uses var(--border). Using var(--surface-border) here would maintain consistency across all updated views.
| border: 1px solid var(--border); | |
| + border: 1px solid var(--surface-border); |
| border: 1px solid var(--border); | ||
| border-radius: 8px; | ||
| color: var(--text-color); | ||
| color: var(--text); |
There was a problem hiding this comment.
Inconsistent text color token. Other views use var(--text-primary) for form controls (e.g., APIKeysView.vue:802). Standardizing on var(--text-primary) instead of var(--text) ensures cohesive rendering and better theme support across the application.
| color: var(--text); | |
| + color: var(--text-primary); |
1 participant
The Agents editor's input had no visible border in dark mode. Root cause: the view referenced design tokens that do not exist, and a browser drops a property whose var() is undefined. A sweep found the same phantom tokens in the API keys and users views (transparent card surfaces, inherited text colors); all three now use the design system's real tokens. Also gives the Agents header buttons the standard gap and layers the editor modal on the system z-index scale.