switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Feat v0.6.14 visual polish

Browse Source 
Fix v0.6.13 spacing regressions with half-step tokens (--sp-1h 6px,
--sp-2h 10px). Purge ~65 stale hex/rgba fallback values from var() calls
including all old gold #b38a4e references. Self-host DM Sans and JetBrains
Mono woff2 fonts, eliminating Google Fonts CDN dependency. Standardize
border-radius to three tokens (--radius-sm 4px, --radius 8px, --radius-lg
12px) across all kernel CSS and 12 extension packages.

Also fixes: theme settings showing resolved mode instead of stored preference,
surface-inner overflow causing notes scrollbar and chat input clipping at
high zoom, user menu drift at scale >100% from zoom-unaware fixed positioning,
and three undefined CSS variable references.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jeffrey Smith
2026-04-01 12:59:06 +00:00
parent 3af62a9cc5
commit 6fff84f40a
35 changed files with 422 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
packages/editor/css/main.css
View File

@@ -13,7 +13,7 @@
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--bg, #0e0e10);
background: var(--bg);
}
/* ── Topbar ────────────────────────────────── */
@@ -25,8 +25,8 @@
padding: 0 var(--sp-3);
height: 40px;
flex-shrink: 0;
background: var(--bg-secondary, #151517);
border-bottom: 1px solid var(--border, #2a2a2e);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
font-size: 13px;
position: relative;
z-index: 20;
@@ -36,30 +36,30 @@
display: flex;
align-items: center;
gap: var(--sp-1);
color: var(--text-3, #777);
color: var(--text-3);
text-decoration: none;
font-size: 12px;
font-weight: 500;
padding: var(--sp-1) var(--sp-2);
border-radius: 4px;
border-radius: var(--radius-sm);
transition: color 0.15s, background 0.15s;
}
.ext-editor-topbar-back:hover {
color: var(--text, #eee);
color: var(--text);
background: var(--bg-hover);
}
.ext-editor-topbar-sep {
width: 1px;
height: 18px;
background: var(--border, #2a2a2e);
background: var(--border);
}
.ext-editor-topbar-name {
font-size: 13px;
font-weight: 600;
color: var(--text, #eee);
color: var(--text);
}
/* ── Workspace Selector ────────────────────── */
@@ -74,18 +74,18 @@
gap: var(--sp-2);
background: none;
border: 1px solid transparent;
color: var(--text, #eee);
color: var(--text);
font-size: 13px;
font-weight: 600;
font-family: inherit;
padding: var(--sp-1) var(--sp-2);
border-radius: 4px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.ext-editor-ws-selector-btn:hover {
border-color: var(--border, #2a2a2e);
border-color: var(--border);
background: var(--bg-hover);
}
@@ -95,9 +95,9 @@
top: 100%;
left: 0;
margin-top: var(--sp-1);
background: var(--bg-secondary, #1a1a1e);
border: 1px solid var(--border, #2a2a2e);
border-radius: 8px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius);
min-width: 220px;
max-height: 320px;
overflow-y: auto;
@@ -119,7 +119,7 @@
text-align: left;
background: none;
border: none;
color: var(--text, #eee);
color: var(--text);
font-size: 12px;
font-family: inherit;
padding: var(--sp-2) var(--sp-3);
@@ -132,13 +132,13 @@
}
.ext-editor-ws-dropdown-item.active {
color: var(--accent, #b38a4e);
color: var(--accent);
font-weight: 600;
}
.ext-editor-ws-dropdown-divider {
height: 1px;
background: var(--border, #2a2a2e);
background: var(--border);
margin: var(--sp-1) 0;
}
@@ -146,22 +146,22 @@
display: flex;
align-items: center;
gap: var(--sp-2);
color: var(--accent, #b38a4e);
color: var(--accent);
}
.ext-editor-topbar-branch {
display: flex;
align-items: center;
gap: var(--sp-1);
background: var(--purple-dim, rgba(160, 120, 255, 0.1));
background: var(--purple-dim);
padding: 2px var(--sp-2);
border-radius: 4px;
border-radius: var(--radius-sm);
}
.ext-editor-topbar-branch-text {
font-size: 11px;
font-weight: 600;
color: var(--purple, #a078ff);
color: var(--purple);
font-family: var(--mono, 'SF Mono', monospace);
}
@@ -185,19 +185,19 @@
.ext-editor-bootstrap-card {
text-align: center;
padding: var(--sp-10);
background: var(--bg-secondary, #151517);
border: 1px solid var(--border, #2a2a2e);
border-radius: 12px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
max-width: 360px;
}
.ext-editor-bootstrap-input {
width: 100%;
padding: var(--sp-2) var(--sp-3);
background: var(--bg, #0e0e10);
border: 1px solid var(--border, #2a2a2e);
border-radius: 6px;
color: var(--text, #eee);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: 13px;
font-family: inherit;
outline: none;
@@ -206,16 +206,16 @@
}
.ext-editor-bootstrap-input:focus {
border-color: var(--accent, #b38a4e);
border-color: var(--accent);
}
.ext-editor-bootstrap-btn {
width: 100%;
padding: var(--sp-3) var(--sp-4);
background: var(--accent, #b38a4e);
background: var(--accent);
color: #fff;
border: none;
border-radius: 6px;
border-radius: var(--radius);
font-size: 13px;
font-weight: 600;
font-family: inherit;
@@ -233,10 +233,10 @@
justify-content: space-between;
width: 100%;
padding: var(--sp-3) var(--sp-3);
background: var(--bg, #0e0e10);
border: 1px solid var(--border, #2a2a2e);
border-radius: 6px;
color: var(--text, #eee);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: 13px;
font-family: inherit;
cursor: pointer;
@@ -246,7 +246,7 @@
}
.ext-editor-bootstrap-ws-item:hover {
border-color: var(--accent, #b38a4e);
border-color: var(--accent);
background: var(--bg-hover);
}
@@ -256,7 +256,7 @@
.ext-editor-bootstrap-ws-date {
font-size: 11px;
color: var(--text-3, #777);
color: var(--text-3);
}
/* ── FileTree overrides (in editor context) ── */
@@ -265,7 +265,7 @@
height: 100%;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border, #2a2a2e);
border-right: 1px solid var(--border);
}
.ext-editor .file-tree-header {
@@ -273,13 +273,13 @@
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border, #2a2a2e);
border-bottom: 1px solid var(--border);
}
.ext-editor .file-tree-title {
font-size: 11px;
font-weight: 600;
color: var(--text-2, #999);
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.4px;
flex: 1;
@@ -298,7 +298,7 @@
padding: 3px var(--sp-2);
cursor: pointer;
font-size: 12px;
color: var(--text-2, #999);
color: var(--text-2);
transition: background 0.1s;
}
@@ -307,14 +307,14 @@
}
.ext-editor .file-tree-row.active {
background: var(--accent-dim, rgba(179, 138, 78, 0.15));
color: var(--text, #eee);
background: var(--accent-dim);
color: var(--text);
}
.ext-editor .file-tree-arrow {
width: 12px;
font-size: 10px;
color: var(--text-3, #555);
color: var(--text-3);
text-align: center;
}
@@ -332,17 +332,17 @@
}
/* Git status indicators */
.ext-editor .file-tree-row.git-modified .file-tree-name { color: var(--warning, #e5a842); }
.ext-editor .file-tree-row.git-added .file-tree-name { color: var(--success, #4caf50); }
.ext-editor .file-tree-row.git-untracked .file-tree-name { color: var(--text-3, #555); font-style: italic; }
.ext-editor .file-tree-row.git-deleted .file-tree-name { color: var(--danger, #f44336); text-decoration: line-through; }
.ext-editor .file-tree-row.git-modified .file-tree-name { color: var(--warning); }
.ext-editor .file-tree-row.git-added .file-tree-name { color: var(--success); }
.ext-editor .file-tree-row.git-untracked .file-tree-name { color: var(--text-3); font-style: italic; }
.ext-editor .file-tree-row.git-deleted .file-tree-name { color: var(--danger); text-decoration: line-through; }
/* Context menu */
.ext-editor-file-tree-ctx-menu {
position: fixed;
background: var(--bg-secondary, #1a1a1e);
border: 1px solid var(--border, #2a2a2e);
border-radius: 6px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-1) 0;
min-width: 120px;
z-index: 1000;
@@ -352,7 +352,7 @@
.ext-editor-file-tree-ctx-item {
padding: var(--sp-2) var(--sp-3);
font-size: 12px;
color: var(--text, #eee);
color: var(--text);
cursor: pointer;
}
@@ -372,8 +372,8 @@
display: flex;
align-items: center;
gap: 0;
background: var(--bg-secondary, #151517);
border-bottom: 1px solid var(--border, #2a2a2e);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
height: 32px;
overflow-x: auto;
flex-shrink: 0;
@@ -388,16 +388,16 @@
padding: 0 var(--sp-3);
height: 100%;
font-size: 12px;
color: var(--text-3, #777);
color: var(--text-3);
cursor: pointer;
border-right: 1px solid var(--border, #2a2a2e);
border-right: 1px solid var(--border);
transition: background 0.1s;
white-space: nowrap;
}
.ext-editor .code-editor-tab:hover { background: var(--bg-hover); }
.ext-editor .code-editor-tab.active { color: var(--text, #eee); background: var(--bg, #0e0e10); }
.ext-editor .code-editor-tab.modified .code-editor-tab-modified { color: var(--warning, #e5a842); }
.ext-editor .code-editor-tab.active { color: var(--text); background: var(--bg); }
.ext-editor .code-editor-tab.modified .code-editor-tab-modified { color: var(--warning); }
.ext-editor .code-editor-tab-icon { font-size: 12px; }
.ext-editor .code-editor-tab-modified { font-size: 10px; color: var(--text-3); }
@@ -405,18 +405,18 @@
.ext-editor .code-editor-tab-close {
background: none;
border: none;
color: var(--text-3, #555);
color: var(--text-3);
font-size: 12px;
cursor: pointer;
padding: 0 2px;
margin-left: var(--sp-1);
border-radius: 2px;
border-radius: var(--radius-sm);
line-height: 1;
}
.ext-editor .code-editor-tab-close:hover {
background: var(--danger-dim, rgba(244, 67, 54, 0.15));
color: var(--danger, #f44336);
background: var(--danger-dim);
color: var(--danger);
}
.ext-editor .code-editor-content {
@@ -446,18 +446,18 @@
padding: 0 var(--sp-3);
height: 24px;
flex-shrink: 0;
background: var(--bg-secondary, #151517);
border-top: 1px solid var(--border, #2a2a2e);
background: var(--bg-secondary);
border-top: 1px solid var(--border);
font-size: 11px;
color: var(--text-3, #777);
color: var(--text-3);
font-family: var(--mono, 'SF Mono', monospace);
}
.ext-editor .code-editor-textarea-fallback {
width: 100%;
height: 100%;
background: var(--bg, #0e0e10);
color: var(--text, #eee);
background: var(--bg);
color: var(--text);
border: none;
padding: var(--sp-3);
font-family: var(--mono, 'SF Mono', monospace);
@@ -470,7 +470,7 @@
/* ── Tabbed assist pane overrides ──────────── */
.ext-editor .pane-tabbed {
border-left: 1px solid var(--border, #2a2a2e);
border-left: 1px solid var(--border);
}
/* ChatPane in editor tabbed pane */
@@ -506,7 +506,7 @@
flex-wrap: wrap;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-2);
border-bottom: 1px solid var(--border, #2a2a2e);
border-bottom: 1px solid var(--border);
}
.ext-editor .ext-notes-toolbar .sw-btn--sm {