Changeset 0.25.1 (#161)

src/css/primitives.css

@@ -41,14 +41,6 @@ input[type="password"]:focus, textarea:focus {
 }
 select option { background: var(--bg-surface); color: var(--text); }
 
-.form-group { margin-bottom: 0.75rem; }
-.form-group label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 4px; font-weight: 500; }
-.form-group input, .form-group select, .form-group textarea {
-    width: 100%;
-}
-.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
-    outline: none; border-color: var(--accent);
-}
 .form-row { display: flex; gap: 0.75rem; }
 .form-row .form-group { flex: 1; }
 .form-hint { font-weight: 400; color: var(--text-3); margin-left: 4px; }
@@ -68,25 +60,6 @@ select option { background: var(--bg-surface); color: var(--text); }
 .range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }
 .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin: 0.5rem 0; color: var(--text-2); }
 
-/* ── Theme Toggle ────────────────────────── */
-.theme-toggle {
-    display: flex; gap: 4px; padding: 3px;
-    background: var(--bg); border: 1px solid var(--border);
-    border-radius: var(--radius); width: fit-content;
-}
-.theme-btn {
-    display: flex; align-items: center; gap: 6px;
-    padding: 6px 14px; border-radius: calc(var(--radius) - 2px);
-    border: none; background: none; color: var(--text-3);
-    font-family: var(--font); font-size: 13px; font-weight: 500;
-    cursor: pointer; transition: all var(--transition);
-}
-.theme-btn:hover { color: var(--text); background: var(--bg-hover); }
-.theme-btn.active {
-    color: var(--text); background: var(--bg-raised);
-    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
-}
-
 
 /* ── Toast ────────────────────────────────── */
 
@@ -320,9 +293,6 @@ select option { background: var(--bg-surface); color: var(--text); }
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 .kb-popup-meta { font-size: 11px; color: var(--text-3); }
-.kb-popup-empty, .kb-popup-loading {
-    padding: 16px; text-align: center; font-size: 13px; color: var(--text-3);
-}
 
 /* KB management panel (settings tab) */
 .kb-manage-header {
@@ -335,7 +305,7 @@ select option { background: var(--bg-surface); color: var(--text); }
 .kb-manage-item {
     display: flex; align-items: center; gap: 8px;
     padding: 8px 10px; border-radius: var(--radius);
-    background: var(--bg-2); transition: background var(--transition);
+    background: var(--bg-raised); transition: background var(--transition);
 }
 .kb-manage-item:hover { background: var(--bg-hover); }
 .kb-manage-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
@@ -344,9 +314,6 @@ select option { background: var(--bg-surface); color: var(--text); }
 .kb-manage-stats { font-size: 11px; color: var(--text-3); }
 .kb-manage-desc-block { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
 .kb-manage-actions { display: flex; gap: 4px; flex-shrink: 0; }
-.kb-manage-empty, .kb-manage-loading {
-    padding: 20px; text-align: center; font-size: 13px; color: var(--text-3);
-}
 .kb-doc-item[data-doc-status="pending"] .kb-manage-name,
 .kb-doc-item[data-doc-status="extracting"] .kb-manage-name,
 .kb-doc-item[data-doc-status="chunking"] .kb-manage-name,
@@ -363,20 +330,15 @@ select option { background: var(--bg-surface); color: var(--text); }
     color: var(--text-2); margin-bottom: 5px;
 }
 .form-group input, .form-group select, .form-group textarea {
-    padding: 8px 12px; border-radius: 8px;
-    border: 1px solid var(--border);
-    background: var(--input-bg, var(--bg)); color: var(--text);
-    font-size: 13px; font-family: inherit;
-    width: 100%; max-width: 360px; outline: none;
-    transition: border-color 0.15s;
+    width: 100%; outline: none;
 }
 .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
     border-color: var(--accent);
 }
 .form-group input:disabled { opacity: 0.6; }
-.form-group input[type="range"] { max-width: 100%; border: none; background: none; }
+.form-group input[type="range"] { border: none; background: none; }
 .form-group input[type="range"]:focus { box-shadow: none; }
-.form-group input[type="checkbox"] { width: auto; max-width: none; accent-color: var(--accent); }
+.form-group input[type="checkbox"] { width: auto; accent-color: var(--accent); }
 
 .toggle-group {
     display: flex; gap: 1px; padding: 3px;
@@ -392,26 +354,32 @@ select option { background: var(--bg-surface); color: var(--text); }
 .toggle-btn.active { background: var(--bg-raised); color: var(--text); }
 .toggle-btn:hover { color: var(--text-2); }
 
-.btn-primary { background: var(--accent); color: var(--text-on-color); border: none; }
-.btn-primary:hover { background: var(--accent-hover); }
-.btn-danger { background: var(--danger); color: var(--text-on-color); border: none; }
 .btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
 .btn-ghost:hover { background: var(--bg-hover); }
 .btn-subtle { background: var(--accent-dim); color: var(--accent); border: none; }
 .btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 500; font-family: inherit; }
-.btn-md { padding: 7px 15px; font-size: 13px; border-radius: 8px; cursor: pointer; font-weight: 500; font-family: inherit; }
+.btn-md { padding: 7px 15px; font-size: 13px; border-radius: var(--radius); cursor: pointer; font-weight: 500; font-family: inherit; }
 
 /* ── Badge ───────────────────────────────── */
 .badge {
-    font-size: 10px; padding: 2px 7px; border-radius: 4px;
+    font-size: 10px; padding: 2px 8px; border-radius: 4px;
     font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
     display: inline-flex; align-items: center;
 }
-.badge-accent { background: var(--accent-dim); color: var(--accent); }
-.badge-success { background: var(--success-dim); color: var(--success); }
-.badge-warning { background: var(--warning-dim); color: var(--warning); }
-.badge-danger { background: var(--danger-dim); color: var(--danger); }
-.badge-muted { background: var(--bg-raised); color: var(--text-3); }
+
+/* Dim variants (colored text on tinted background) */
+.badge-accent, .badge-models, .badge-team   { background: var(--accent-dim); color: var(--accent-light); }
+.badge-success, .badge-active, .badge-healthy { background: var(--success-dim); color: var(--success-light); }
+.badge-warning, .badge-degraded              { background: var(--warning-dim); color: var(--warning-light); }
+.badge-danger, .badge-disabled, .badge-unhealthy { background: var(--danger-dim); color: var(--danger-light); }
+.badge-muted, .badge-unknown, .badge-provider-type, .badge-global, .badge-user { background: var(--bg-raised); color: var(--text-3); }
+.badge-purple, .badge-service               { background: var(--purple-dim); color: var(--purple); }
+
+/* Solid variants (white text on colored background) */
+.badge-admin    { background: var(--accent); color: var(--text-on-color); }
+.badge-inactive { background: var(--danger); color: var(--text-on-color); }
+.badge-pending  { background: var(--warning); color: var(--text-on-warning); }
+.badge-private  { background: var(--purple); color: var(--text-on-color); }
 
 /* ── Status Dot ──────────────────────────── */
 .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@@ -429,4 +397,10 @@ select option { background: var(--bg-surface); color: var(--text); }
 }
 .icon-btn:hover { background: var(--bg-hover); color: var(--text-2); }
 .icon-btn.active { color: var(--accent); }
+.icon-btn-danger:hover { color: var(--danger); }
+
+/* ── Utility States ─────────────────────── */
+.loading { color: var(--text-3); font-size: 13px; padding: 0.5rem; }
+.error-hint { color: var(--danger); font-size: 13px; padding: 0.5rem; }
+.empty-hint { color: var(--text-3); font-size: 13px; text-align: center; padding: 1rem; }