From 94c3299391d7e31a85bed7706cb558e19fc448f2 Mon Sep 17 00:00:00 2001 From: nfebe Date: Thu, 23 Jul 2026 14:34:30 +0100 Subject: [PATCH] fix(ui): Use real design tokens so borders and surfaces render 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. --- src/views/APIKeysView.vue | 28 ++++++++++++------------ src/views/AgentsView.vue | 46 ++++++++++++++++++++++----------------- src/views/UsersView.vue | 40 +++++++++++++++++----------------- 3 files changed, 60 insertions(+), 54 deletions(-) diff --git a/src/views/APIKeysView.vue b/src/views/APIKeysView.vue index 4671f99..509b10f 100644 --- a/src/views/APIKeysView.vue +++ b/src/views/APIKeysView.vue @@ -601,7 +601,7 @@ onMounted(() => { justify-content: center; padding: 3rem; gap: 1rem; - color: var(--text-secondary); + color: var(--text-muted); } .error-state { @@ -609,7 +609,7 @@ onMounted(() => { } .apikeys-table-container { - background: var(--surface-card); + background: var(--surface-raised); border-radius: 8px; border: 1px solid var(--surface-border); overflow: hidden; @@ -628,9 +628,9 @@ onMounted(() => { } .data-table th { - background: var(--surface-ground); + background: var(--surface-sunken); font-weight: 600; - color: var(--text-secondary); + color: var(--text-muted); font-size: 0.8125rem; text-transform: uppercase; } @@ -656,12 +656,12 @@ onMounted(() => { .key-desc { font-size: 0.75rem; - color: var(--text-secondary); + color: var(--text-muted); } code { padding: 0.25rem 0.5rem; - background: var(--surface-ground); + background: var(--surface-sunken); border-radius: 4px; font-family: monospace; font-size: 0.8125rem; @@ -693,7 +693,7 @@ code { .role-badge.inherit { background: rgba(var(--text-secondary-rgb), 0.1); - color: var(--text-secondary); + color: var(--text-muted); } .status-badge { @@ -711,7 +711,7 @@ code { .status-badge.inactive { background: rgba(var(--text-secondary-rgb), 0.1); - color: var(--text-secondary); + color: var(--text-muted); } .actions-cell { @@ -733,7 +733,7 @@ code { } .modal-content { - background: var(--surface-card); + background: var(--surface-raised); border-radius: var(--radius-xl); width: 100%; max-width: 960px; @@ -789,7 +789,7 @@ code { display: block; margin-bottom: 0.5rem; font-weight: 500; - color: var(--text-secondary); + color: var(--text-muted); } .form-group input, @@ -798,7 +798,7 @@ code { padding: 0.5rem 0.75rem; border: 1px solid var(--surface-border); border-radius: 4px; - background: var(--surface-ground); + background: var(--surface-sunken); color: var(--text-primary); } @@ -806,7 +806,7 @@ code { display: block; margin-top: 0.25rem; font-size: 0.75rem; - color: var(--text-secondary); + color: var(--text-muted); } .checkbox-label { @@ -849,7 +849,7 @@ code { align-items: center; gap: 0.5rem; padding: 0.75rem; - background: var(--surface-ground); + background: var(--surface-sunken); border-radius: 4px; } @@ -867,7 +867,7 @@ code { padding: 0.5rem 1rem; border: none; border-radius: 4px; - background: var(--surface-ground); + background: var(--surface-sunken); color: var(--text-primary); cursor: pointer; font-size: 0.875rem; diff --git a/src/views/AgentsView.vue b/src/views/AgentsView.vue index a6a8a77..ab6d3bf 100644 --- a/src/views/AgentsView.vue +++ b/src/views/AgentsView.vue @@ -238,7 +238,7 @@ onMounted(fetchAgents); } .subtitle { - color: var(--text-secondary); + color: var(--text-muted); margin-top: var(--space-1); } @@ -249,14 +249,14 @@ onMounted(fetchAgents); align-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); - color: var(--text-secondary); + color: var(--text-muted); text-align: center; } .empty-state .example { text-align: left; - background: var(--surface-ground); - border: 1px solid var(--border-color); + background: var(--surface-sunken); + border: 1px solid var(--border); border-radius: 8px; padding: var(--space-4); font-size: 0.82rem; @@ -276,8 +276,8 @@ onMounted(fetchAgents); align-items: center; gap: var(--space-4); padding: var(--space-4); - background: var(--surface-card); - border: 1px solid var(--border-color); + background: var(--surface-raised); + border: 1px solid var(--border); border-radius: 10px; } @@ -296,14 +296,14 @@ onMounted(fetchAgents); font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 50px; - background: var(--surface-ground); - border: 1px solid var(--border-color); - color: var(--text-secondary); + background: var(--surface-sunken); + border: 1px solid var(--border); + color: var(--text-muted); } .agent-description { margin: var(--space-1) 0 0; - color: var(--text-secondary); + color: var(--text-muted); font-size: 0.88rem; } @@ -314,6 +314,12 @@ onMounted(fetchAgents); flex-shrink: 0; } +.header-actions { + display: flex; + gap: var(--space-2); + align-items: center; +} + .modal-overlay { position: fixed; inset: 0; @@ -321,13 +327,13 @@ onMounted(fetchAgents); display: flex; align-items: center; justify-content: center; - z-index: 1000; + z-index: var(--z-modal); } .modal-container.agent-editor { width: min(720px, 92vw); - background: var(--surface-card); - border: 1px solid var(--border-color); + background: var(--surface-raised); + border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; @@ -339,7 +345,7 @@ onMounted(fetchAgents); align-items: center; gap: var(--space-2); padding: var(--space-4); - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--border); } .modal-header h3 { @@ -354,7 +360,7 @@ onMounted(fetchAgents); .close-btn { background: none; border: none; - color: var(--text-secondary); + color: var(--text-muted); cursor: pointer; padding: var(--space-1); } @@ -370,16 +376,16 @@ onMounted(fetchAgents); display: block; margin-bottom: var(--space-1); font-size: 0.85rem; - color: var(--text-secondary); + color: var(--text-muted); } .form-control { width: 100%; padding: 0.5rem 0.75rem; - background: var(--surface-ground); - border: 1px solid var(--border-color); + background: var(--surface-sunken); + border: 1px solid var(--border); border-radius: 8px; - color: var(--text-color); + color: var(--text); } .modal-footer { @@ -387,7 +393,7 @@ onMounted(fetchAgents); gap: var(--space-2); align-items: center; padding: var(--space-4); - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--border); } .footer-spacer { diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue index ff54c25..6443d92 100644 --- a/src/views/UsersView.vue +++ b/src/views/UsersView.vue @@ -420,7 +420,7 @@ onMounted(() => { justify-content: center; padding: 3rem; gap: 1rem; - color: var(--text-secondary); + color: var(--text-muted); } .error-state { @@ -428,7 +428,7 @@ onMounted(() => { } .users-table-container { - background: var(--surface-card); + background: var(--surface-raised); border-radius: 8px; border: 1px solid var(--surface-border); overflow: hidden; @@ -447,9 +447,9 @@ onMounted(() => { } .data-table th { - background: var(--surface-ground); + background: var(--surface-sunken); font-weight: 600; - color: var(--text-secondary); + color: var(--text-muted); font-size: 0.8125rem; text-transform: uppercase; } @@ -503,7 +503,7 @@ onMounted(() => { .status-badge.inactive { background: var(--color-gray-100, #f3f4f6); - color: var(--text-secondary); + color: var(--text-muted); } .perm-indicator { @@ -520,13 +520,13 @@ onMounted(() => { } .perm-indicator.default { - background: var(--surface-ground); - color: var(--text-secondary); + background: var(--surface-sunken); + color: var(--text-muted); } .deploy-count { font-weight: 500; - color: var(--text-secondary); + color: var(--text-muted); } .actions-cell { @@ -548,7 +548,7 @@ onMounted(() => { } .modal-content { - background: var(--surface-card); + background: var(--surface-raised); border-radius: var(--radius-xl); width: 100%; max-width: 720px; @@ -595,7 +595,7 @@ onMounted(() => { padding: 0.75rem 1rem; border: none; background: none; - color: var(--text-secondary); + color: var(--text-muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; @@ -623,10 +623,10 @@ onMounted(() => { height: 1.25rem; padding: 0 0.375rem; border-radius: 999px; - background: var(--surface-ground); + background: var(--surface-sunken); font-size: 0.6875rem; font-weight: 600; - color: var(--text-secondary); + color: var(--text-muted); } .tab-btn.active .tab-count { @@ -642,7 +642,7 @@ onMounted(() => { .tab-hint { margin: 0.25rem 0 1rem; font-size: 0.8125rem; - color: var(--text-secondary); + color: var(--text-muted); padding: 0; } @@ -654,7 +654,7 @@ onMounted(() => { display: block; margin-bottom: 0.5rem; font-weight: 500; - color: var(--text-secondary); + color: var(--text-muted); } .form-group input, @@ -663,7 +663,7 @@ onMounted(() => { padding: 0.5rem 0.75rem; border: 1px solid var(--surface-border); border-radius: 4px; - background: var(--surface-ground); + background: var(--surface-sunken); color: var(--text-primary); } @@ -722,7 +722,7 @@ onMounted(() => { padding: 0.5rem; border: 1px solid var(--surface-border); border-radius: 4px; - background: var(--surface-ground); + background: var(--surface-sunken); } .deployments-list { @@ -736,7 +736,7 @@ onMounted(() => { align-items: center; gap: 0.5rem; padding: 0.5rem; - background: var(--surface-ground); + background: var(--surface-sunken); border-radius: 4px; } @@ -749,7 +749,7 @@ onMounted(() => { padding: 0.25rem 0.5rem; border: 1px solid var(--surface-border); border-radius: 4px; - background: var(--surface-card); + background: var(--surface-raised); } .no-deployments { @@ -758,7 +758,7 @@ onMounted(() => { justify-content: center; gap: 0.5rem; padding: 2rem; - color: var(--text-secondary); + color: var(--text-muted); } .btn { @@ -768,7 +768,7 @@ onMounted(() => { padding: 0.5rem 1rem; border: none; border-radius: 4px; - background: var(--surface-ground); + background: var(--surface-sunken); color: var(--text-primary); cursor: pointer; font-size: 0.875rem;