Feat v0.6.14 visual polish (#49)

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
2026-04-01 13:25:04 +00:00
parent 3af62a9cc5
commit c9b9e68c18
35 changed files with 436 additions and 334 deletions
--- a/packages/chat/css/main.css
+++ b/packages/chat/css/main.css
@@ -162,7 +162,7 @@
 .ext-chat-sidebar__search-input {
  width: 100%;
  border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
  font-size: 13px;
  font-family: inherit;
@@ -263,7 +263,7 @@
  align-self: center;
  background: none;
  border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  font-size: 12px;
  color: var(--text-2);
@@ -320,7 +320,7 @@
 .ext-chat-msg__body {
  max-width: 65%;
  background: var(--bg-raised);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-3);
 }

@@ -380,7 +380,7 @@
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2px;
 }
@@ -395,7 +395,7 @@
  border: none;
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  color: var(--text-2);
@@ -422,7 +422,7 @@
  width: 100%;
  min-width: 200px;
  border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-2);
  font-size: 14px;
  font-family: inherit;
@@ -451,7 +451,7 @@
 .ext-chat-compose__input {
  flex: 1;
  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: 14px;
  font-family: inherit;
@@ -567,7 +567,7 @@

 .ext-chat-new__title {
  border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: 14px;
  font-family: inherit;
@@ -590,7 +590,7 @@
  font-size: 12px;
  font-weight: 500;
  padding: 3px var(--sp-2);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
 }

 .ext-chat-new__chip button {
--- a/packages/editor/css/main.css
+++ b/packages/editor/css/main.css
@@ -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 {
--- a/packages/git-board/css/main.css
+++ b/packages/git-board/css/main.css
@@ -116,7 +116,7 @@
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
 }

 .ext-git-board-column__cards {
--- a/packages/hello-dashboard/css/main.css
+++ b/packages/hello-dashboard/css/main.css
@@ -7,7 +7,7 @@
 .ext-hello-dashboard-header h1 { font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 var(--sp-2) 0; }
 .ext-hello-dashboard-subtitle { font-size: 14px; color: var(--text-2); margin: 0; }
 .ext-hello-dashboard-subtitle code,
-.ext-hello-dashboard-card-value code { background: var(--bg-raised); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
+.ext-hello-dashboard-card-value code { background: var(--bg-raised); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 13px; }
 .ext-hello-dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
 .ext-hello-dashboard-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); }
 .ext-hello-dashboard-card-title { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--sp-2); }
--- a/packages/notes/css/main.css
+++ b/packages/notes/css/main.css
@@ -91,7 +91,7 @@
  font-size: 13px;
  padding: 1px var(--sp-1);
  border: 1px solid var(--accent);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text);
  font-family: var(--font);
@@ -329,7 +329,7 @@
  font-size: 13px;
  background: var(--bg-raised);
  padding: 2px var(--sp-2);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
  color: var(--accent);
 }
 .ext-notes-preview pre {
@@ -409,7 +409,7 @@
  font-size: 11px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
  color: var(--text-2);
  margin: 2px 2px;
  white-space: nowrap;
@@ -569,8 +569,8 @@
  border-bottom-style: solid;
 }
 .ext-notes-wikilink.ext-notes-wikilink--unresolved {
-  color: var(--danger, #e53e3e);
-  border-bottom-color: var(--danger, #e53e3e);
+  color: var(--danger);
+  border-bottom-color: var(--danger);
  opacity: 0.7;
 }
 .ext-notes-wikilink.ext-notes-wikilink--unresolved:hover {
@@ -608,7 +608,7 @@
  color: var(--text-2);
  font-size: 10px;
  padding: 0 var(--sp-2);
-  border-radius: 8px;
+  border-radius: var(--radius);
  line-height: 16px;
 }
 .ext-notes-backlinks-panel__item {
@@ -616,7 +616,7 @@
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
 }
@@ -711,7 +711,7 @@
  flex: 1;
  position: relative;
  overflow: hidden;
-  background: var(--bg-surface, #fff);
+  background: var(--bg-surface);
  min-height: 0;
 }
 .ext-notes-graph-pane canvas {
@@ -730,7 +730,7 @@
  align-items: center;
  z-index: 5;
  font-size: 12px;
-  color: var(--text-2, #666);
+  color: var(--text-2);
 }
 .ext-notes-graph-toolbar label {
  display: flex;
@@ -743,8 +743,8 @@
 .ext-notes-graph-tooltip {
  position: absolute;
  pointer-events: none;
-  background: var(--bg-raised, #fff);
-  border: 1px solid var(--border, #ddd);
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: var(--sp-2) var(--sp-3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
@@ -766,13 +766,13 @@
 .ext-notes-graph-tooltip__tags .ext-notes-tag-pill {
  font-size: 10px;
  padding: 1px var(--sp-2);
-  border-radius: 8px;
-  background: var(--bg-hover, #eee);
-  color: var(--text-2, #666);
+  border-radius: var(--radius);
+  background: var(--bg-hover);
+  color: var(--text-2);
 }
 .ext-notes-graph-tooltip__edges {
  font-size: 11px;
-  color: var(--text-3, #999);
+  color: var(--text-3);
  margin-top: var(--sp-1);
 }
 .ext-notes-graph-empty {
@@ -780,7 +780,7 @@
  align-items: center;
  justify-content: center;
  height: 100%;
-  color: var(--text-3, #999);
+  color: var(--text-3);
  font-size: 14px;
 }

--- a/packages/schedules/css/main.css
+++ b/packages/schedules/css/main.css
@@ -100,7 +100,7 @@
  font-size: 0.8rem;
  background: var(--bg-raised);
  padding: 2px var(--sp-2);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
  color: var(--text-2);
 }

@@ -128,7 +128,7 @@
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px var(--sp-3);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
@@ -153,7 +153,7 @@
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
 }
@@ -206,7 +206,7 @@
 .ext-schedules-logs {
  background: var(--bg-surface);
  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius);
  overflow: hidden;
 }

--- a/packages/sdk-test-runner/css/main.css
+++ b/packages/sdk-test-runner/css/main.css
@@ -10,16 +10,16 @@
  font-size: 20px;
  font-weight: 600;
  margin: 0;
-  color: var(--text, #e0e0e0);
+  color: var(--text);
 }
 .ext-sdk-test-runner-version {
  font-size: 12px;
-  color: var(--text-3, #888);
+  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
 }
 .ext-sdk-test-runner-desc {
  font-size: 13px;
-  color: var(--text-2, #aaa);
+  color: var(--text-2);
  margin: 0 0 var(--sp-4) 0;
  line-height: 1.5;
 }
@@ -28,9 +28,9 @@
 .ext-sdk-test-runner-fixtures {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
-  border: 1px solid var(--border, #333);
-  border-radius: 6px;
-  background: var(--bg-raised, #1a1a1a);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-raised);
 }
 .ext-sdk-test-runner-fixture-row {
  display: flex;
@@ -41,43 +41,43 @@
 .ext-sdk-test-runner-fixture-label {
  font-size: 12px;
  font-weight: 600;
-  color: var(--text-2, #aaa);
+  color: var(--text-2);
  text-transform: uppercase;
  white-space: nowrap;
 }
 .ext-sdk-test-runner-select {
  padding: var(--sp-1) var(--sp-2);
  font-size: 13px;
-  background: var(--bg-raised, #222);
-  color: var(--text, #e0e0e0);
-  border: 1px solid var(--border, #444);
-  border-radius: 4px;
+  background: var(--bg-raised);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
  min-width: 130px;
 }
 .ext-sdk-test-runner-input {
  padding: var(--sp-1) var(--sp-2);
  font-size: 13px;
-  background: var(--bg-raised, #222);
-  color: var(--text, #e0e0e0);
-  border: 1px solid var(--border, #444);
-  border-radius: 4px;
+  background: var(--bg-raised);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  font-family: 'JetBrains Mono', monospace;
 }
 .ext-sdk-test-runner-input::placeholder {
-  color: var(--text-3, #666);
+  color: var(--text-3);
  font-family: inherit;
 }
 .ext-sdk-test-runner-fixture-status {
  font-size: 12px;
-  color: var(--text-3, #888);
+  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
 }
 .ext-sdk-test-runner-fixture-note {
  font-size: 11px;
-  color: var(--text-3, #666);
+  color: var(--text-3);
  margin-top: var(--sp-2);
  line-height: 1.4;
 }
@@ -98,13 +98,13 @@
 .ext-sdk-test-runner-filter-label {
  font-size: 12px;
  font-weight: 600;
-  color: var(--text-2, #aaa);
+  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
 }
 .ext-sdk-test-runner-check {
  font-size: 13px;
-  color: var(--text, #e0e0e0);
+  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
@@ -117,25 +117,25 @@
 }
 .ext-sdk-test-runner-btn {
  padding: var(--sp-2) var(--sp-4);
-  border-radius: 6px;
-  border: 1px solid var(--border, #444);
-  background: var(--bg-raised, #2a2a2a);
-  color: var(--text, #e0e0e0);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-raised);
+  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
 }
-.ext-sdk-test-runner-btn:hover { background: var(--bg-hover, #383838); }
+.ext-sdk-test-runner-btn:hover { background: var(--bg-hover); }
 .ext-sdk-test-runner-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .ext-sdk-test-runner-btn-primary {
-  background: var(--accent, #3b82f6);
-  border-color: var(--accent, #3b82f6);
+  background: var(--accent);
+  border-color: var(--accent);
  color: #fff;
 }
 .ext-sdk-test-runner-btn-primary:hover { filter: brightness(1.15); }
 .ext-sdk-test-runner-btn-danger {
-  background: var(--danger, #ef4444);
-  border-color: var(--danger, #ef4444);
+  background: var(--danger);
+  border-color: var(--danger);
  color: #fff;
 }

@@ -146,14 +146,14 @@
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
-  background: var(--bg-raised, #1e1e1e);
-  border-radius: 8px;
-  border: 1px solid var(--border, #333);
+  background: var(--bg-raised);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
 }
 .ext-sdk-test-runner-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
@@ -162,8 +162,8 @@
 /* Table */
 .ext-sdk-test-runner-table-wrap {
  overflow-x: auto;
-  border: 1px solid var(--border, #333);
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
 }
 .ext-sdk-test-runner-table {
  width: 100%;
@@ -173,25 +173,25 @@
 .ext-sdk-test-runner-table th {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
-  background: var(--bg-raised, #1e1e1e);
-  color: var(--text-2, #aaa);
+  background: var(--bg-raised);
+  color: var(--text-2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
-  border-bottom: 1px solid var(--border, #333);
+  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
 }
 .ext-sdk-test-runner-table td {
  padding: var(--sp-2) var(--sp-3);
-  border-bottom: 1px solid var(--border-subtle, #2a2a2a);
-  color: var(--text, #e0e0e0);
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text);
  vertical-align: top;
 }
 .ext-sdk-test-runner-table tbody tr:hover {
-  background: var(--bg-hover, rgba(255,255,255,0.03));
+  background: var(--bg-hover);
 }
 .ext-sdk-test-runner-test-name {
  font-family: 'JetBrains Mono', monospace;
@@ -205,12 +205,12 @@
 .ext-sdk-test-runner-ms {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
-  color: var(--text-3, #888);
+  color: var(--text-3);
  text-align: right;
 }
 .ext-sdk-test-runner-detail {
  font-size: 11px;
-  color: var(--text-3, #888);
+  color: var(--text-3);
  max-width: 400px;
  word-break: break-word;
 }
--- a/packages/tasks/css/main.css
+++ b/packages/tasks/css/main.css
@@ -117,7 +117,7 @@
 .ext-tasks-card__status {
  font-size: 11px;
  padding: 2px var(--sp-2);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
  font-weight: 500;
 }
 .ext-tasks-card__status--todo        { background: var(--accent-dim); color: var(--accent); }
@@ -196,7 +196,7 @@
  color: var(--text-3);
  background: var(--bg-hover);
  padding: 1px 7px;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
 }
 .ext-tasks-board__col-body {
  flex: 1;
--- a/packages/workflow-demo/css/main.css
+++ b/packages/workflow-demo/css/main.css
@@ -78,7 +78,7 @@
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
    font-weight: 600;
 }
 .ext-workflow-demo-badge-browser { background: var(--success-dim); color: var(--success-light); }
@@ -101,7 +101,7 @@
 .ext-workflow-demo-card .ext-workflow-demo-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
-    border-radius: 10px;
+    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    color: var(--text-2);
    white-space: nowrap;
@@ -118,13 +118,13 @@
    flex-wrap: wrap;
    padding: var(--sp-3);
    background: var(--bg-raised);
-    border-radius: 6px;
+    border-radius: var(--radius);
    overflow-x: auto;
 }

 .ext-workflow-demo-stage-node {
    border: 1px solid var(--border);
-    border-radius: 6px;
+    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
    min-width: 80px;
    text-align: center;
@@ -168,7 +168,7 @@
 /* Collapsible sections */
 .ext-workflow-demo-card-collapsible {
    border: 1px solid var(--border);
-    border-radius: 6px;
+    border-radius: var(--radius);
    font-size: 0.8rem;
 }
 .ext-workflow-demo-card-collapsible summary {
@@ -188,7 +188,7 @@
    background: var(--bg-raised);
    color: var(--text);
    padding: var(--sp-2);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 0.72rem;
    line-height: 1.4;
@@ -208,7 +208,7 @@
 .ext-workflow-demo-card .ext-workflow-demo-btn {
    padding: 0.4rem 1rem;
    border: none;
-    border-radius: 6px;
+    border-radius: var(--radius);
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 500;
@@ -228,7 +228,7 @@
    padding: var(--sp-1) var(--sp-2);
    background: var(--input-bg);
    border: 1px solid var(--border);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--mono);
 }
@@ -237,7 +237,7 @@
    font-size: 0.7rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
    color: var(--text-2);
    cursor: pointer;
 }