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

40
CHANGELOG.md
View File

@@ -2,6 +2,46 @@
All notable changes to Armature are documented here. All notable changes to Armature are documented here.
## v0.6.14 — Visual Polish
Systematic cleanup of stale values, self-hosted fonts, and rendering fixes.
Final visual pass before the v0.6.15 usability survey gate.
### Fixed
- **v0.6.13 spacing regressions** — added half-step tokens (`--sp-1h` 6px,
`--sp-2h` 10px) and restored correct padding on `.sw-btn--sm`, `.sw-input`,
`.sw-menu__item`, `.sw-dropdown__option`, `.sw-tabs__tab`.
- **Theme settings toggle** — showed resolved theme ("Dark") instead of stored
mode ("System"). Changed `appearance.js` to read `sw.theme.mode`.
- **Notes surface scrollbar** — added `overflow: hidden` to `.surface-inner`
in `base.html`, preventing spurious scrollbar at any scale.
- **Chat input clipped at high scale** — same `overflow: hidden` fix prevents
zoomed content from overflowing the surface container.
- **User menu drift at scale > 100%** — `menu.js` now divides
`getBoundingClientRect()` coords by the CSS zoom factor, fixing position
for `position: fixed` menus inside a zoomed ancestor.
- **Undefined variables** — `--text-secondary` (login), `--text-muted`
(user picker), `--text-1` (settings toggle) replaced with correct tokens.
### Changed
- **Stale fallback colors purged** — removed ~65 hex/rgba fallback values
from `var()` calls across 9 kernel CSS files and 3 extension packages.
Old gold theme color `#b38a4e` fully eliminated (9 instances).
- **Self-hosted fonts** — bundled DM Sans and JetBrains Mono woff2 files
in `src/fonts/`. Replaced Google Fonts `@import` and login.html `<link>`
with local `@font-face` declarations. Zero external font dependencies.
- **Consistent border-radius** — added `--radius-sm: 4px` token. Migrated
~60 hardcoded `border-radius` values across all kernel CSS and 12 extension
packages to three tokens: `--radius-sm` (4px), `--radius` (8px),
`--radius-lg` (12px).
### Updated
- `docs/EXTENSION-CSS.md` — added `--sp-1h`, `--sp-2h` half-step tokens
and `--radius-sm` to the public CSS contract.
## v0.6.13 — Responsive & Spacing ## v0.6.13 — Responsive & Spacing
Spacing token scale and tablet breakpoint. All kernel CSS and extension Spacing token scale and tablet breakpoint. All kernel CSS and extension

17
ROADMAP-UI.md
View File

@@ -83,16 +83,13 @@ login. All kernel CSS and 12 in-tree packages migrated to spacing tokens.
`EXTENSION-CSS.md` updated with spacing table and breakpoint guide. `EXTENSION-CSS.md` updated with spacing table and breakpoint guide.
Font-size scale deferred to v0.6.14. See CHANGELOG.md. Font-size scale deferred to v0.6.14. See CHANGELOG.md.
### v0.6.14 — Visual Polish ### v0.6.14 — Visual Polish ✅
Systematic cleanup of stale values and rendering artifacts. Shipped. Stale fallback colors purged (~65 instances), fonts self-hosted
(DM Sans + JetBrains Mono woff2), border-radius standardized to three tokens
| Step | Description | (`--radius-sm`, `--radius`, `--radius-lg`). Also fixed v0.6.13 spacing
|------|-------------| regressions (half-step tokens), theme settings default, surface overflow,
| Purge stale fallback colors | Remove all `var(--foo, #hexvalue)` fallbacks that reference old gold theme colors (`#b38a4e` and variants). If a CSS variable is undefined at this point, that's a bug — don't mask it with a wrong fallback. | and user menu zoom drift. See CHANGELOG.md.
| Self-host fonts | Bundle DM Sans and JetBrains Mono woff2 files in `src/fonts/`. Replace Google Fonts `@import` with local `@font-face` declarations. Zero external font dependencies. |
| Light theme audit | Walk every surface in light mode. Fix any remaining hardcoded dark-mode colors, contrast issues, or invisible borders. Document any surface-specific light-mode overrides. |
| Consistent border-radius | Surfaces currently mix `6px`, `8px`, `10px`, `var(--radius)`, `var(--radius-lg)`. Audit and reduce to 3 values: `--radius-sm: 4px`, `--radius: 8px`, `--radius-lg: 12px`. |
### v0.6.15 — Usability Survey Gate ### v0.6.15 — Usability Survey Gate
@@ -122,7 +119,7 @@ v0.6.12 Extension CSS Isolation ✅ SHIPPED
↓ ↓
v0.6.13 Responsive & Spacing ✅ SHIPPED v0.6.13 Responsive & Spacing ✅ SHIPPED
↓ ↓
v0.6.14 Visual Polish ← Final visual pass after structure is locked v0.6.14 Visual Polish ✅ SHIPPED
↓ ↓
v0.6.15 Usability Survey Gate ← Machine-audit the finished product v0.6.15 Usability Survey Gate ← Machine-audit the finished product
``` ```

2
ROADMAP.md
View File

@@ -1,6 +1,6 @@
# Armature — Roadmap # Armature — Roadmap
## Current: v0.6.13 — Responsive & Spacing ## Current: v0.6.14 — Visual Polish
Self-hosted extensible platform. Auth, identity, packages, Starlark sandbox, Self-hosted extensible platform. Auth, identity, packages, Starlark sandbox,
storage, realtime, and ops are kernel primitives. Everything else is an extension. storage, realtime, and ops are kernel primitives. Everything else is an extension.

2
VERSION
View File

@@ -1 +1 @@
0.6.13 0.6.14

7
docs/EXTENSION-CSS.md
View File

@@ -122,7 +122,9 @@ values are acceptable.
| Variable | Value | Computed | | Variable | Value | Computed |
|----------|-------|---------| |----------|-------|---------|
| `--sp-1` | `0.25rem` | 4px | | `--sp-1` | `0.25rem` | 4px |
| `--sp-1h` | `0.375rem` | 6px |
| `--sp-2` | `0.5rem` | 8px | | `--sp-2` | `0.5rem` | 8px |
| `--sp-2h` | `0.625rem` | 10px |
| `--sp-3` | `0.75rem` | 12px | | `--sp-3` | `0.75rem` | 12px |
| `--sp-4` | `1rem` | 16px | | `--sp-4` | `1rem` | 16px |
| `--sp-5` | `1.25rem` | 20px | | `--sp-5` | `1.25rem` | 20px |
@@ -147,8 +149,9 @@ Example:
|----------|---------| |----------|---------|
| `--font` | Primary font family | | `--font` | Primary font family |
| `--mono` | Monospace font family | | `--mono` | Monospace font family |
| `--radius` | Default border-radius (8px) | | `--radius-sm` | Small border-radius (4px) — badges, inline controls |
| `--radius-lg` | Large border-radius (12px) | | `--radius` | Default border-radius (8px) — buttons, inputs, cards |
| `--radius-lg` | Large border-radius (12px) — modals, dialogs, large cards |
| `--transition` | Default transition timing | | `--transition` | Default transition timing |
| `--shadow-lg` | Large elevation shadow | | `--shadow-lg` | Large elevation shadow |
| `--overlay` | Modal overlay color | | `--overlay` | Modal overlay color |

18
packages/chat/css/main.css
View File

@@ -162,7 +162,7 @@
.ext-chat-sidebar__search-input { .ext-chat-sidebar__search-input {
width: 100%; width: 100%;
border: 1px solid var(--border); 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); padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
font-size: 13px; font-size: 13px;
font-family: inherit; font-family: inherit;
@@ -263,7 +263,7 @@
align-self: center; align-self: center;
background: none; background: none;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: var(--radius-sm);
padding: var(--sp-1) var(--sp-3); padding: var(--sp-1) var(--sp-3);
font-size: 12px; font-size: 12px;
color: var(--text-2); color: var(--text-2);
@@ -320,7 +320,7 @@
.ext-chat-msg__body { .ext-chat-msg__body {
max-width: 65%; max-width: 65%;
background: var(--bg-raised); background: var(--bg-raised);
border-radius: 12px; border-radius: var(--radius-lg);
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
} }
@@ -380,7 +380,7 @@
right: 0; right: 0;
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: var(--radius);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
padding: 2px; padding: 2px;
} }
@@ -395,7 +395,7 @@
border: none; border: none;
padding: var(--sp-1) var(--sp-2); padding: var(--sp-1) var(--sp-2);
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: var(--radius-sm);
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
color: var(--text-2); color: var(--text-2);
@@ -422,7 +422,7 @@
width: 100%; width: 100%;
min-width: 200px; min-width: 200px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: var(--radius);
padding: var(--sp-2) var(--sp-2); padding: var(--sp-2) var(--sp-2);
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
@@ -451,7 +451,7 @@
.ext-chat-compose__input { .ext-chat-compose__input {
flex: 1; flex: 1;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: var(--radius);
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
@@ -567,7 +567,7 @@
.ext-chat-new__title { .ext-chat-new__title {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: var(--radius);
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
@@ -590,7 +590,7 @@
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
padding: 3px var(--sp-2); padding: 3px var(--sp-2);
border-radius: 12px; border-radius: var(--radius-lg);
} }
.ext-chat-new__chip button { .ext-chat-new__chip button {

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

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

2
packages/git-board/css/main.css
View File

@@ -116,7 +116,7 @@
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
padding: 2px 7px; padding: 2px 7px;
border-radius: 10px; border-radius: var(--radius-lg);
} }
.ext-git-board-column__cards { .ext-git-board-column__cards {

2
packages/hello-dashboard/css/main.css
View File

@@ -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-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 { font-size: 14px; color: var(--text-2); margin: 0; }
.ext-hello-dashboard-subtitle code, .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-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 { 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); } .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); }

32
packages/notes/css/main.css
View File

@@ -91,7 +91,7 @@
font-size: 13px; font-size: 13px;
padding: 1px var(--sp-1); padding: 1px var(--sp-1);
border: 1px solid var(--accent); border: 1px solid var(--accent);
border-radius: 3px; border-radius: var(--radius-sm);
background: var(--bg-surface); background: var(--bg-surface);
color: var(--text); color: var(--text);
font-family: var(--font); font-family: var(--font);
@@ -329,7 +329,7 @@
font-size: 13px; font-size: 13px;
background: var(--bg-raised); background: var(--bg-raised);
padding: 2px var(--sp-2); padding: 2px var(--sp-2);
border-radius: 3px; border-radius: var(--radius-sm);
color: var(--accent); color: var(--accent);
} }
.ext-notes-preview pre { .ext-notes-preview pre {
@@ -409,7 +409,7 @@
font-size: 11px; font-size: 11px;
background: var(--bg-raised); background: var(--bg-raised);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 10px; border-radius: var(--radius-lg);
color: var(--text-2); color: var(--text-2);
margin: 2px 2px; margin: 2px 2px;
white-space: nowrap; white-space: nowrap;
@@ -569,8 +569,8 @@
border-bottom-style: solid; border-bottom-style: solid;
} }
.ext-notes-wikilink.ext-notes-wikilink--unresolved { .ext-notes-wikilink.ext-notes-wikilink--unresolved {
color: var(--danger, #e53e3e); color: var(--danger);
border-bottom-color: var(--danger, #e53e3e); border-bottom-color: var(--danger);
opacity: 0.7; opacity: 0.7;
} }
.ext-notes-wikilink.ext-notes-wikilink--unresolved:hover { .ext-notes-wikilink.ext-notes-wikilink--unresolved:hover {
@@ -608,7 +608,7 @@
color: var(--text-2); color: var(--text-2);
font-size: 10px; font-size: 10px;
padding: 0 var(--sp-2); padding: 0 var(--sp-2);
border-radius: 8px; border-radius: var(--radius);
line-height: 16px; line-height: 16px;
} }
.ext-notes-backlinks-panel__item { .ext-notes-backlinks-panel__item {
@@ -616,7 +616,7 @@
align-items: center; align-items: center;
gap: var(--sp-2); gap: var(--sp-2);
padding: var(--sp-1) var(--sp-2); padding: var(--sp-1) var(--sp-2);
border-radius: 4px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
} }
@@ -711,7 +711,7 @@
flex: 1; flex: 1;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: var(--bg-surface, #fff); background: var(--bg-surface);
min-height: 0; min-height: 0;
} }
.ext-notes-graph-pane canvas { .ext-notes-graph-pane canvas {
@@ -730,7 +730,7 @@
align-items: center; align-items: center;
z-index: 5; z-index: 5;
font-size: 12px; font-size: 12px;
color: var(--text-2, #666); color: var(--text-2);
} }
.ext-notes-graph-toolbar label { .ext-notes-graph-toolbar label {
display: flex; display: flex;
@@ -743,8 +743,8 @@
.ext-notes-graph-tooltip { .ext-notes-graph-tooltip {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
background: var(--bg-raised, #fff); background: var(--bg-raised);
border: 1px solid var(--border, #ddd); border: 1px solid var(--border);
border-radius: var(--radius, 6px); border-radius: var(--radius, 6px);
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
box-shadow: 0 2px 8px rgba(0,0,0,0.12); box-shadow: 0 2px 8px rgba(0,0,0,0.12);
@@ -766,13 +766,13 @@
.ext-notes-graph-tooltip__tags .ext-notes-tag-pill { .ext-notes-graph-tooltip__tags .ext-notes-tag-pill {
font-size: 10px; font-size: 10px;
padding: 1px var(--sp-2); padding: 1px var(--sp-2);
border-radius: 8px; border-radius: var(--radius);
background: var(--bg-hover, #eee); background: var(--bg-hover);
color: var(--text-2, #666); color: var(--text-2);
} }
.ext-notes-graph-tooltip__edges { .ext-notes-graph-tooltip__edges {
font-size: 11px; font-size: 11px;
color: var(--text-3, #999); color: var(--text-3);
margin-top: var(--sp-1); margin-top: var(--sp-1);
} }
.ext-notes-graph-empty { .ext-notes-graph-empty {
@@ -780,7 +780,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
color: var(--text-3, #999); color: var(--text-3);
font-size: 14px; font-size: 14px;
} }

8
packages/schedules/css/main.css
View File

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

86
packages/sdk-test-runner/css/main.css
View File

@@ -10,16 +10,16 @@
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
color: var(--text, #e0e0e0); color: var(--text);
} }
.ext-sdk-test-runner-version { .ext-sdk-test-runner-version {
font-size: 12px; font-size: 12px;
color: var(--text-3, #888); color: var(--text-3);
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
} }
.ext-sdk-test-runner-desc { .ext-sdk-test-runner-desc {
font-size: 13px; font-size: 13px;
color: var(--text-2, #aaa); color: var(--text-2);
margin: 0 0 var(--sp-4) 0; margin: 0 0 var(--sp-4) 0;
line-height: 1.5; line-height: 1.5;
} }
@@ -28,9 +28,9 @@
.ext-sdk-test-runner-fixtures { .ext-sdk-test-runner-fixtures {
margin-bottom: var(--sp-4); margin-bottom: var(--sp-4);
padding: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--border, #333); border: 1px solid var(--border);
border-radius: 6px; border-radius: var(--radius);
background: var(--bg-raised, #1a1a1a); background: var(--bg-raised);
} }
.ext-sdk-test-runner-fixture-row { .ext-sdk-test-runner-fixture-row {
display: flex; display: flex;
@@ -41,43 +41,43 @@
.ext-sdk-test-runner-fixture-label { .ext-sdk-test-runner-fixture-label {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--text-2, #aaa); color: var(--text-2);
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
} }
.ext-sdk-test-runner-select { .ext-sdk-test-runner-select {
padding: var(--sp-1) var(--sp-2); padding: var(--sp-1) var(--sp-2);
font-size: 13px; font-size: 13px;
background: var(--bg-raised, #222); background: var(--bg-raised);
color: var(--text, #e0e0e0); color: var(--text);
border: 1px solid var(--border, #444); border: 1px solid var(--border);
border-radius: 4px; border-radius: var(--radius-sm);
min-width: 130px; min-width: 130px;
} }
.ext-sdk-test-runner-input { .ext-sdk-test-runner-input {
padding: var(--sp-1) var(--sp-2); padding: var(--sp-1) var(--sp-2);
font-size: 13px; font-size: 13px;
background: var(--bg-raised, #222); background: var(--bg-raised);
color: var(--text, #e0e0e0); color: var(--text);
border: 1px solid var(--border, #444); border: 1px solid var(--border);
border-radius: 4px; border-radius: var(--radius-sm);
flex: 1; flex: 1;
min-width: 200px; min-width: 200px;
max-width: 400px; max-width: 400px;
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
} }
.ext-sdk-test-runner-input::placeholder { .ext-sdk-test-runner-input::placeholder {
color: var(--text-3, #666); color: var(--text-3);
font-family: inherit; font-family: inherit;
} }
.ext-sdk-test-runner-fixture-status { .ext-sdk-test-runner-fixture-status {
font-size: 12px; font-size: 12px;
color: var(--text-3, #888); color: var(--text-3);
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
} }
.ext-sdk-test-runner-fixture-note { .ext-sdk-test-runner-fixture-note {
font-size: 11px; font-size: 11px;
color: var(--text-3, #666); color: var(--text-3);
margin-top: var(--sp-2); margin-top: var(--sp-2);
line-height: 1.4; line-height: 1.4;
} }
@@ -98,13 +98,13 @@
.ext-sdk-test-runner-filter-label { .ext-sdk-test-runner-filter-label {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--text-2, #aaa); color: var(--text-2);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.ext-sdk-test-runner-check { .ext-sdk-test-runner-check {
font-size: 13px; font-size: 13px;
color: var(--text, #e0e0e0); color: var(--text);
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -117,25 +117,25 @@
} }
.ext-sdk-test-runner-btn { .ext-sdk-test-runner-btn {
padding: var(--sp-2) var(--sp-4); padding: var(--sp-2) var(--sp-4);
border-radius: 6px; border-radius: var(--radius);
border: 1px solid var(--border, #444); border: 1px solid var(--border);
background: var(--bg-raised, #2a2a2a); background: var(--bg-raised);
color: var(--text, #e0e0e0); color: var(--text);
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
transition: background 0.15s; 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:disabled { opacity: 0.5; cursor: not-allowed; }
.ext-sdk-test-runner-btn-primary { .ext-sdk-test-runner-btn-primary {
background: var(--accent, #3b82f6); background: var(--accent);
border-color: var(--accent, #3b82f6); border-color: var(--accent);
color: #fff; color: #fff;
} }
.ext-sdk-test-runner-btn-primary:hover { filter: brightness(1.15); } .ext-sdk-test-runner-btn-primary:hover { filter: brightness(1.15); }
.ext-sdk-test-runner-btn-danger { .ext-sdk-test-runner-btn-danger {
background: var(--danger, #ef4444); background: var(--danger);
border-color: var(--danger, #ef4444); border-color: var(--danger);
color: #fff; color: #fff;
} }
@@ -146,14 +146,14 @@
gap: var(--sp-2); gap: var(--sp-2);
margin-bottom: var(--sp-3); margin-bottom: var(--sp-3);
padding: var(--sp-3) var(--sp-3); padding: var(--sp-3) var(--sp-3);
background: var(--bg-raised, #1e1e1e); background: var(--bg-raised);
border-radius: 8px; border-radius: var(--radius);
border: 1px solid var(--border, #333); border: 1px solid var(--border);
} }
.ext-sdk-test-runner-badge { .ext-sdk-test-runner-badge {
display: inline-block; display: inline-block;
padding: var(--sp-1) var(--sp-3); padding: var(--sp-1) var(--sp-3);
border-radius: 4px; border-radius: var(--radius-sm);
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
@@ -162,8 +162,8 @@
/* Table */ /* Table */
.ext-sdk-test-runner-table-wrap { .ext-sdk-test-runner-table-wrap {
overflow-x: auto; overflow-x: auto;
border: 1px solid var(--border, #333); border: 1px solid var(--border);
border-radius: 8px; border-radius: var(--radius);
} }
.ext-sdk-test-runner-table { .ext-sdk-test-runner-table {
width: 100%; width: 100%;
@@ -173,25 +173,25 @@
.ext-sdk-test-runner-table th { .ext-sdk-test-runner-table th {
text-align: left; text-align: left;
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
background: var(--bg-raised, #1e1e1e); background: var(--bg-raised);
color: var(--text-2, #aaa); color: var(--text-2);
font-weight: 600; font-weight: 600;
font-size: 11px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
border-bottom: 1px solid var(--border, #333); border-bottom: 1px solid var(--border);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
} }
.ext-sdk-test-runner-table td { .ext-sdk-test-runner-table td {
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border-subtle, #2a2a2a); border-bottom: 1px solid var(--border-subtle);
color: var(--text, #e0e0e0); color: var(--text);
vertical-align: top; vertical-align: top;
} }
.ext-sdk-test-runner-table tbody tr:hover { .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 { .ext-sdk-test-runner-test-name {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
@@ -205,12 +205,12 @@
.ext-sdk-test-runner-ms { .ext-sdk-test-runner-ms {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-size: 11px;
color: var(--text-3, #888); color: var(--text-3);
text-align: right; text-align: right;
} }
.ext-sdk-test-runner-detail { .ext-sdk-test-runner-detail {
font-size: 11px; font-size: 11px;
color: var(--text-3, #888); color: var(--text-3);
max-width: 400px; max-width: 400px;
word-break: break-word; word-break: break-word;
} }

4
packages/tasks/css/main.css
View File

@@ -117,7 +117,7 @@
.ext-tasks-card__status { .ext-tasks-card__status {
font-size: 11px; font-size: 11px;
padding: 2px var(--sp-2); padding: 2px var(--sp-2);
border-radius: 10px; border-radius: var(--radius-lg);
font-weight: 500; font-weight: 500;
} }
.ext-tasks-card__status--todo { background: var(--accent-dim); color: var(--accent); } .ext-tasks-card__status--todo { background: var(--accent-dim); color: var(--accent); }
@@ -196,7 +196,7 @@
color: var(--text-3); color: var(--text-3);
background: var(--bg-hover); background: var(--bg-hover);
padding: 1px 7px; padding: 1px 7px;
border-radius: 10px; border-radius: var(--radius-lg);
} }
.ext-tasks-board__col-body { .ext-tasks-board__col-body {
flex: 1; flex: 1;

18
packages/workflow-demo/css/main.css
View File

@@ -78,7 +78,7 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: var(--radius-sm);
font-weight: 600; font-weight: 600;
} }
.ext-workflow-demo-badge-browser { background: var(--success-dim); color: var(--success-light); } .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 { .ext-workflow-demo-card .ext-workflow-demo-badge {
font-size: 0.7rem; font-size: 0.7rem;
padding: 2px 8px; padding: 2px 8px;
border-radius: 10px; border-radius: var(--radius-lg);
background: var(--bg-raised); background: var(--bg-raised);
color: var(--text-2); color: var(--text-2);
white-space: nowrap; white-space: nowrap;
@@ -118,13 +118,13 @@
flex-wrap: wrap; flex-wrap: wrap;
padding: var(--sp-3); padding: var(--sp-3);
background: var(--bg-raised); background: var(--bg-raised);
border-radius: 6px; border-radius: var(--radius);
overflow-x: auto; overflow-x: auto;
} }
.ext-workflow-demo-stage-node { .ext-workflow-demo-stage-node {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: var(--radius);
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
min-width: 80px; min-width: 80px;
text-align: center; text-align: center;
@@ -168,7 +168,7 @@
/* Collapsible sections */ /* Collapsible sections */
.ext-workflow-demo-card-collapsible { .ext-workflow-demo-card-collapsible {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: var(--radius);
font-size: 0.8rem; font-size: 0.8rem;
} }
.ext-workflow-demo-card-collapsible summary { .ext-workflow-demo-card-collapsible summary {
@@ -188,7 +188,7 @@
background: var(--bg-raised); background: var(--bg-raised);
color: var(--text); color: var(--text);
padding: var(--sp-2); padding: var(--sp-2);
border-radius: 4px; border-radius: var(--radius-sm);
overflow-x: auto; overflow-x: auto;
font-size: 0.72rem; font-size: 0.72rem;
line-height: 1.4; line-height: 1.4;
@@ -208,7 +208,7 @@
.ext-workflow-demo-card .ext-workflow-demo-btn { .ext-workflow-demo-card .ext-workflow-demo-btn {
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border: none; border: none;
border-radius: 6px; border-radius: var(--radius);
font-size: 0.8rem; font-size: 0.8rem;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
@@ -228,7 +228,7 @@
padding: var(--sp-1) var(--sp-2); padding: var(--sp-1) var(--sp-2);
background: var(--input-bg); background: var(--input-bg);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: var(--radius-sm);
color: var(--text); color: var(--text);
font-family: var(--mono); font-family: var(--mono);
} }
@@ -237,7 +237,7 @@
font-size: 0.7rem; font-size: 0.7rem;
background: var(--bg-raised); background: var(--bg-raised);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: var(--radius-sm);
color: var(--text-2); color: var(--text-2);
cursor: pointer; cursor: pointer;
} }

2
server/pages/templates/base.html
View File

@@ -29,7 +29,7 @@
<style> <style>
body { margin: 0; background: var(--bg); color: var(--text); display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); } body { margin: 0; background: var(--bg); color: var(--text); display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
.surface { flex: 1; min-height: 0; overflow: hidden; } .surface { flex: 1; min-height: 0; overflow: hidden; }
.surface-inner { width: 100%; height: 100%; } .surface-inner { width: 100%; height: 100%; overflow: hidden; }
.banner { flex-shrink: 0; } .banner { flex-shrink: 0; }
</style> </style>
<meta name="theme-color" content="#0e0e10" id="metaThemeColor"> <meta name="theme-color" content="#0e0e10" id="metaThemeColor">

1
server/pages/templates/login.html
View File

@@ -7,7 +7,6 @@
<title>Armature</title> <title>Armature</title>
<link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}"> <link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}">
<link rel="icon" type="image/x-icon" href="{{.BasePath}}/favicon.ico?v={{.Version}}"> <link rel="icon" type="image/x-icon" href="{{.BasePath}}/favicon.ico?v={{.Version}}">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{.BasePath}}/css/variables.css?v={{.Version}}"> <link rel="stylesheet" href="{{.BasePath}}/css/variables.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/sw-login.css?v={{.Version}}"> <link rel="stylesheet" href="{{.BasePath}}/css/sw-login.css?v={{.Version}}">
<style> <style>

68
src/css/admin-surfaces.css
View File

@@ -8,9 +8,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1px; gap: 1px;
background: var(--border, #2a2a2e); background: var(--border);
border: 1px solid var(--border, #2a2a2e); border: 1px solid var(--border);
border-radius: 8px; border-radius: var(--radius);
overflow: hidden; overflow: hidden;
} }
@@ -20,7 +20,7 @@
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
padding: 14px 16px; padding: 14px 16px;
background: var(--bg-secondary, #151517); background: var(--bg-secondary);
} }
.admin-surface-row:hover { .admin-surface-row:hover {
@@ -42,31 +42,31 @@
.admin-surface-name { .admin-surface-name {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--text, #eee); color: var(--text);
} }
.admin-surface-badge { .admin-surface-badge {
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: var(--radius-sm);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.3px; letter-spacing: 0.3px;
} }
.admin-surface-badge--core { .admin-surface-badge--core {
background: var(--accent-dim, rgba(179, 138, 78, 0.15)); background: var(--accent-dim);
color: var(--accent, #b38a4e); color: var(--accent);
} }
.admin-surface-badge--extension { .admin-surface-badge--extension {
background: var(--purple-dim, rgba(160, 120, 255, 0.1)); background: var(--purple-dim);
color: var(--purple, #a078ff); color: var(--purple);
} }
.admin-surface-badge--required { .admin-surface-badge--required {
background: var(--bg-raised, #2a2a2e); background: var(--bg-raised);
color: var(--text-3, #555); color: var(--text-3);
} }
.admin-surface-meta { .admin-surface-meta {
@@ -74,18 +74,18 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
font-size: 12px; font-size: 12px;
color: var(--text-3, #555); color: var(--text-3);
} }
.admin-surface-id { .admin-surface-id {
font-family: var(--mono, 'SF Mono', monospace); font-family: var(--mono);
font-size: 11px; font-size: 11px;
} }
.admin-surface-route { .admin-surface-route {
font-family: var(--mono, 'SF Mono', monospace); font-family: var(--mono);
font-size: 11px; font-size: 11px;
color: var(--text-3, #555); color: var(--text-3);
} }
.admin-surface-actions { .admin-surface-actions {
@@ -114,8 +114,8 @@
height: 20px; height: 20px;
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
background: var(--bg-raised, #2a2a2e); background: var(--bg-raised);
border-radius: 10px; border-radius: var(--radius-lg);
position: relative; position: relative;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
@@ -123,7 +123,7 @@
} }
.admin-surface-toggle input[type="checkbox"]:checked { .admin-surface-toggle input[type="checkbox"]:checked {
background: var(--accent, #b38a4e); background: var(--accent);
} }
.admin-surface-toggle input[type="checkbox"]::after { .admin-surface-toggle input[type="checkbox"]::after {
@@ -148,7 +148,7 @@
.admin-surface-toggle-label { .admin-surface-toggle-label {
font-size: 12px; font-size: 12px;
color: var(--text-2, #999); color: var(--text-2);
min-width: 56px; min-width: 56px;
} }
@@ -159,36 +159,36 @@
gap: 12px; gap: 12px;
} }
.dashboard-provider-card { .dashboard-provider-card {
background: var(--bg-surface, #1a1a1d); background: var(--bg-surface);
border: 1px solid var(--border, #2a2a2e); border: 1px solid var(--border);
border-radius: 8px; border-radius: var(--radius);
padding: 12px 14px; padding: 12px 14px;
} }
.dashboard-db-pool { .dashboard-db-pool {
background: var(--bg-surface, #1a1a1d); background: var(--bg-surface);
border: 1px solid var(--border, #2a2a2e); border: 1px solid var(--border);
border-radius: 8px; border-radius: var(--radius);
padding: 14px; padding: 14px;
} }
.dashboard-pool-bar { .dashboard-pool-bar {
height: 8px; height: 8px;
background: var(--bg-raised, #2a2a2e); background: var(--bg-raised);
border-radius: 4px; border-radius: var(--radius-sm);
overflow: hidden; overflow: hidden;
} }
.dashboard-pool-fill { .dashboard-pool-fill {
height: 100%; height: 100%;
background: var(--accent, #b38a4e); background: var(--accent);
border-radius: 4px; border-radius: var(--radius-sm);
transition: width 0.3s ease; transition: width 0.3s ease;
} }
.dashboard-errors { .dashboard-errors {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1px; gap: 1px;
background: var(--border, #2a2a2e); background: var(--border);
border: 1px solid var(--border, #2a2a2e); border: 1px solid var(--border);
border-radius: 8px; border-radius: var(--radius);
overflow: hidden; overflow: hidden;
} }
.dashboard-error-row { .dashboard-error-row {
@@ -196,6 +196,6 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 8px 12px; padding: 8px 12px;
background: var(--bg-secondary, #151517); background: var(--bg-secondary);
font-size: 12px; font-size: 12px;
} }

6
src/css/layout.css
View File

@@ -85,7 +85,7 @@
} }
.sb-brand:hover { background: var(--bg-hover); } .sb-brand:hover { background: var(--bg-hover); }
.sb-logo { flex-shrink: 0; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .sb-logo { flex-shrink: 0; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.sb-logo img, .sb-logo .brand-logo-img { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; } .sb-logo img, .sb-logo .brand-logo-img { width: 22px; height: 22px; object-fit: contain; border-radius: var(--radius-sm); }
.brand-collapse { display: none; } .brand-collapse { display: none; }
.brand-text { font-weight: 600; font-size: 14px; } .brand-text { font-weight: 600; font-size: 14px; }
@@ -147,7 +147,7 @@
.split-dropdown.open { display: block; } .split-dropdown.open { display: block; }
.split-dropdown-item { .split-dropdown-item {
display: flex; align-items: center; gap: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2);
padding: 7px var(--sp-3); border-radius: 4px; width: 100%; padding: 7px var(--sp-3); border-radius: var(--radius-sm); width: 100%;
background: none; border: none; color: var(--text-2); background: none; border: none; color: var(--text-2);
cursor: pointer; font-size: 12px; white-space: nowrap; cursor: pointer; font-size: 12px; white-space: nowrap;
transition: background var(--transition), color var(--transition); transition: background var(--transition), color var(--transition);
@@ -233,7 +233,7 @@
.sidebar-search input::placeholder { color: var(--text-3); } .sidebar-search input::placeholder { color: var(--text-3); }
.sidebar-search-clear { .sidebar-search-clear {
background: none; border: none; color: var(--text-3); cursor: pointer; background: none; border: none; color: var(--text-3); cursor: pointer;
font-size: 11px; padding: 2px 4px; border-radius: 4px; font-size: 11px; padding: 2px 4px; border-radius: var(--radius-sm);
transition: color var(--transition); display: none; transition: color var(--transition); display: none;
} }
.sidebar-search-clear:hover { color: var(--text); } .sidebar-search-clear:hover { color: var(--text); }

24
src/css/modals.css
View File

@@ -28,7 +28,7 @@
.modal-header h2 { font-size: 16px; font-weight: 600; } .modal-header h2 { font-size: 16px; font-weight: 600; }
.modal-close { .modal-close {
background: none; border: none; color: var(--text-3); font-size: 18px; background: none; border: none; color: var(--text-3); font-size: 18px;
cursor: pointer; padding: 2px 6px; border-radius: 4px; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
transition: color var(--transition); transition: color var(--transition);
} }
.modal-close:hover { color: var(--text); } .modal-close:hover { color: var(--text); }
@@ -121,7 +121,7 @@
} }
.admin-back { .admin-back {
background: none; border: none; color: var(--text-3); cursor: pointer; background: none; border: none; color: var(--text-3); cursor: pointer;
font-size: 14px; padding: 4px 10px; border-radius: 4px; font-family: var(--font); font-size: 14px; padding: 4px 10px; border-radius: var(--radius-sm); font-family: var(--font);
} }
.admin-back:hover { color: var(--accent); background: var(--bg-raised); } .admin-back:hover { color: var(--accent); background: var(--bg-raised); }
.admin-title { font-size: 16px; font-weight: 600; margin-left: 1rem; flex: 1; } .admin-title { font-size: 16px; font-weight: 600; margin-left: 1rem; flex: 1; }
@@ -191,17 +191,17 @@
.admin-user-info { flex: 1; text-align: left; min-width: 0; } .admin-user-info { flex: 1; text-align: left; min-width: 0; }
.admin-user-email { font-size: 12px; color: var(--text-3); margin-top: 2px; } .admin-user-email { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.admin-user-actions { display: flex; gap: 6px; flex-shrink: 0; } .admin-user-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-user-actions button { background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; min-width: 68px; text-align: center; } .admin-user-actions button { background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12px; cursor: pointer; min-width: 68px; text-align: center; }
.admin-user-actions button:hover { border-color: var(--border-light); color: var(--text); } .admin-user-actions button:hover { border-color: var(--border-light); color: var(--text); }
.admin-user-actions .sw-btn--danger { color: var(--danger); } .admin-user-actions .sw-btn--danger { color: var(--danger); }
.admin-user-actions .sw-btn--danger:hover { border-color: var(--danger); } .admin-user-actions .sw-btn--danger:hover { border-color: var(--danger); }
.inline-select { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-2); border-radius: 4px; padding: 3px 8px; font-size: 12px; cursor: pointer; } .inline-select { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 12px; cursor: pointer; }
.admin-model-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: 14px; min-height: 44px; } .admin-model-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: 14px; min-height: 44px; }
.admin-model-row .model-name { flex: 1; font-weight: 500; } .admin-model-row .model-name { flex: 1; font-weight: 500; }
.admin-model-row .model-caps-inline { display: flex; gap: 3px; } .admin-model-row .model-caps-inline { display: flex; gap: 3px; }
.admin-model-row .provider-meta { min-width: 80px; text-align: right; color: var(--text-3); font-size: 12px; } .admin-model-row .provider-meta { min-width: 80px; text-align: right; color: var(--text-3); font-size: 12px; }
.admin-model-toggle { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--text-2); min-width: 82px; text-align: center; } .admin-model-toggle { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--text-2); min-width: 82px; text-align: center; }
.admin-model-toggle:hover { border-color: var(--accent); color: var(--accent); } .admin-model-toggle:hover { border-color: var(--accent); color: var(--accent); }
.admin-model-toggle.enabled { border-color: var(--success); color: var(--success); } .admin-model-toggle.enabled { border-color: var(--success); color: var(--success); }
.admin-model-toggle.team { border-color: var(--accent); color: var(--accent); } .admin-model-toggle.team { border-color: var(--accent); color: var(--accent); }
@@ -280,10 +280,10 @@
.model-list-item .model-provider { font-size: 12px; color: var(--text-3); } .model-list-item .model-provider { font-size: 12px; color: var(--text-3); }
.model-list-item .model-caps-inline { display: flex; gap: 3px; } .model-list-item .model-caps-inline { display: flex; gap: 3px; }
.admin-approve-form { padding: 10px 12px; margin: -4px 0 8px; background: var(--glass); border-radius: 0 0 8px 8px; border-top: 1px solid var(--border); } .admin-approve-form { padding: 10px 12px; margin: -4px 0 8px; background: var(--glass); border-radius: 0 0 var(--radius) var(--radius); border-top: 1px solid var(--border); }
.admin-approve-form .checkbox-label { display: block; margin: 2px 0; } .admin-approve-form .checkbox-label { display: block; margin: 2px 0; }
.btn-approve { background: var(--success-dim); color: var(--success-light); border: 1px solid rgba(34,197,94,0.3); border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: 12px; } .btn-approve { background: var(--success-dim); color: var(--success-light); border: 1px solid rgba(34,197,94,0.3); border-radius: var(--radius-sm); padding: 3px 10px; cursor: pointer; font-size: 12px; }
.team-card { padding: 8px 10px; background: var(--glass); border-radius: 6px; margin-bottom: 6px; } .team-card { padding: 8px 10px; background: var(--glass); border-radius: var(--radius); margin-bottom: 6px; }
.team-card-info { display: flex; align-items: center; gap: 8px; } .team-card-info { display: flex; align-items: center; gap: 8px; }
.team-admin-back { .team-admin-back {
cursor: pointer; margin-right: 4px; opacity: 0.5; cursor: pointer; margin-right: 4px; opacity: 0.5;
@@ -295,8 +295,8 @@
/* Health + Routing admin (v0.22.3) */ /* Health + Routing admin (v0.22.3) */
.admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); } .admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.admin-health-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-3); } .admin-health-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); }
.list-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-3); margin-bottom: var(--sp-2); } .list-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-2); }
.admin-user-row.user-inactive { opacity: 0.7; } .admin-user-row.user-inactive { opacity: 0.7; }
@@ -333,7 +333,7 @@
.cmd-kbd { .cmd-kbd {
font-size: 10px; font-family: var(--mono); color: var(--text-3); font-size: 10px; font-family: var(--mono); color: var(--text-3);
background: var(--bg); border: 1px solid var(--border); background: var(--bg); border: 1px solid var(--border);
border-radius: 4px; padding: 2px 6px; flex-shrink: 0; border-radius: var(--radius-sm); padding: 2px 6px; flex-shrink: 0;
} }
.cmd-results { .cmd-results {
@@ -370,7 +370,7 @@
.cmd-footer kbd { .cmd-footer kbd {
font-size: 10px; font-family: var(--mono); font-size: 10px; font-family: var(--mono);
background: var(--bg); border: 1px solid var(--border); background: var(--bg); border: 1px solid var(--border);
border-radius: 3px; padding: 1px 4px; border-radius: var(--radius-sm); padding: 1px 4px;
} }

58
src/css/primitives.css
View File

@@ -30,7 +30,7 @@ select option { background: var(--bg-surface); color: var(--text); }
.form-hint { font-weight: 400; color: var(--text-3); margin-left: 4px; } .form-hint { font-weight: 400; color: var(--text-3); margin-left: 4px; }
.range-input { .range-input {
width: 100%; height: 4px; -webkit-appearance: none; appearance: none; width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
background: var(--border); border-radius: 2px; outline: none; background: var(--border); border-radius: var(--radius-sm); outline: none;
margin: 8px 0 4px; cursor: pointer; margin: 8px 0 4px; cursor: pointer;
} }
.range-input::-webkit-slider-thumb { .range-input::-webkit-slider-thumb {
@@ -107,7 +107,7 @@ select option { background: var(--bg-surface); color: var(--text); }
.repl-entry { padding: 2px 6px; } .repl-entry { padding: 2px 6px; }
.repl-entry-input pre { color: var(--text-2); margin: 0; white-space: pre-wrap; word-break: break-all; } .repl-entry-input pre { color: var(--text-2); margin: 0; white-space: pre-wrap; word-break: break-all; }
.repl-entry-result { color: var(--text); } .repl-entry-result { color: var(--text); }
.repl-entry-error { color: var(--danger, #e55); } .repl-entry-error { color: var(--danger); }
.repl-entry-info { color: var(--text-3); font-size: 11px; } .repl-entry-info { color: var(--text-3); font-size: 11px; }
.repl-error-msg { margin: 0; white-space: pre-wrap; font-weight: 500; } .repl-error-msg { margin: 0; white-space: pre-wrap; font-weight: 500; }
@@ -225,7 +225,7 @@ select option { background: var(--bg-surface); color: var(--text); }
} }
.kb-popup-item:hover { background: var(--bg-hover); } .kb-popup-item:hover { background: var(--bg-hover); }
.kb-popup-item .kb-popup-check { .kb-popup-item .kb-popup-check {
width: 16px; height: 16px; border-radius: 3px; width: 16px; height: 16px; border-radius: var(--radius-sm);
border: 1.5px solid var(--border); flex-shrink: 0; border: 1.5px solid var(--border); flex-shrink: 0;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
transition: all var(--transition); transition: all var(--transition);
@@ -291,11 +291,11 @@ select option { background: var(--bg-surface); color: var(--text); }
.toggle-group { .toggle-group {
display: flex; gap: 1px; padding: 3px; display: flex; gap: 1px; padding: 3px;
background: var(--bg); border-radius: 10px; background: var(--bg); border-radius: var(--radius-lg);
border: 1px solid var(--border); width: fit-content; border: 1px solid var(--border); width: fit-content;
} }
.toggle-btn { .toggle-btn {
padding: 6px 14px; border: none; border-radius: 7px; padding: 6px 14px; border: none; border-radius: var(--radius);
background: transparent; color: var(--text-3); background: transparent; color: var(--text-3);
cursor: pointer; font-size: 12px; font-weight: 500; cursor: pointer; font-size: 12px; font-weight: 500;
font-family: inherit; transition: all 0.15s; font-family: inherit; transition: all 0.15s;
@@ -307,7 +307,7 @@ select option { background: var(--bg-surface); color: var(--text); }
/* ── Badge ───────────────────────────────── */ /* ── Badge ───────────────────────────────── */
.badge { .badge {
font-size: 10px; padding: 2px 8px; border-radius: 4px; font-size: 10px; padding: 2px 8px; border-radius: var(--radius-sm);
font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
display: inline-flex; align-items: center; display: inline-flex; align-items: center;
} }
@@ -336,7 +336,7 @@ select option { background: var(--bg-surface); color: var(--text); }
/* ── Icon Button ─────────────────────────── */ /* ── Icon Button ─────────────────────────── */
.icon-btn { .icon-btn {
background: none; border: none; color: var(--text-3); background: none; border: none; color: var(--text-3);
cursor: pointer; padding: var(--sp-1); border-radius: 7px; cursor: pointer; padding: var(--sp-1); border-radius: var(--radius);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
transition: all 0.15s; transition: all 0.15s;
} }
@@ -355,8 +355,8 @@ select option { background: var(--bg-surface); color: var(--text); }
.sw-menu-wrap { position: relative; display: inline-flex; } .sw-menu-wrap { position: relative; display: inline-flex; }
.sw-menu-flyout { .sw-menu-flyout {
display: none; position: absolute; right: 0; left: auto; z-index: 200; display: none; position: absolute; right: 0; left: auto; z-index: 200;
background: var(--bg-elevated, #42424e); border: 1px solid var(--border-elevated, #555); background: var(--bg-elevated); border: 1px solid var(--border-elevated);
border-radius: var(--radius-lg, 8px); padding: 4px; min-width: 170px; border-radius: var(--radius-lg); padding: 4px; min-width: 170px;
box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08); box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08);
} }
.sw-menu-flyout[data-position="down"] { top: 100%; margin-top: 4px; } .sw-menu-flyout[data-position="down"] { top: 100%; margin-top: 4px; }
@@ -367,21 +367,21 @@ select option { background: var(--bg-surface); color: var(--text); }
/* Flyout items — single source of truth for all flyout menus (sw.menu + UserMenu) */ /* Flyout items — single source of truth for all flyout menus (sw.menu + UserMenu) */
.sw-menu-flyout .flyout-item { .sw-menu-flyout .flyout-item {
display: flex; align-items: center; gap: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3); border-radius: var(--radius, 6px); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
background: none; border: none; color: var(--text, #e8e8ed); background: none; border: none; color: var(--text);
cursor: pointer; font-size: 13px; font-family: inherit; width: 100%; cursor: pointer; font-size: 13px; font-family: inherit; width: 100%;
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
} }
.sw-menu-flyout .flyout-item:hover { .sw-menu-flyout .flyout-item:hover {
background: var(--bg-hover, rgba(255,255,255,0.06)); color: var(--text, #eee); background: var(--bg-hover); color: var(--text);
} }
.sw-menu-flyout .flyout-item svg { flex-shrink: 0; opacity: 0.8; } .sw-menu-flyout .flyout-item svg { flex-shrink: 0; opacity: 0.8; }
.sw-menu-flyout .flyout-danger { color: var(--danger, #f44336); } .sw-menu-flyout .flyout-danger { color: var(--danger); }
.sw-menu-flyout .flyout-danger:hover { .sw-menu-flyout .flyout-danger:hover {
background: var(--danger-dim, rgba(244,67,54,0.1)); color: var(--danger, #f44336); background: var(--danger-dim); color: var(--danger);
} }
.sw-menu-flyout .flyout-divider { .sw-menu-flyout .flyout-divider {
border: none; height: 1px; background: var(--border, #2a2a2e); margin: var(--sp-1) 0; border: none; height: 1px; background: var(--border); margin: var(--sp-1) 0;
} }
/* Dropdown — see sw-primitives.css (.sw-dropdown) */ /* Dropdown — see sw-primitives.css (.sw-dropdown) */
@@ -431,16 +431,16 @@ select option { background: var(--bg-surface); color: var(--text); }
.sw-user-picker__input { .sw-user-picker__input {
width: 100%; width: 100%;
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius, 6px); border-radius: var(--radius);
border: 1px solid var(--border, #2a2a2e); border: 1px solid var(--border);
background: var(--bg, #0e0e10); background: var(--bg);
color: var(--text, #eee); color: var(--text);
font-size: 0.85em; font-size: 0.85em;
} }
.sw-user-picker__input:focus { .sw-user-picker__input:focus {
outline: none; outline: none;
border-color: var(--accent, #b38a4e); border-color: var(--accent);
} }
.sw-user-picker__spinner { .sw-user-picker__spinner {
@@ -450,8 +450,8 @@ select option { background: var(--bg-surface); color: var(--text); }
transform: translateY(-50%); transform: translateY(-50%);
width: 14px; width: 14px;
height: 14px; height: 14px;
border: 2px solid var(--border, #2a2a2e); border: 2px solid var(--border);
border-top-color: var(--accent, #b38a4e); border-top-color: var(--accent);
border-radius: 50%; border-radius: 50%;
animation: sw-spin 0.6s linear infinite; animation: sw-spin 0.6s linear infinite;
} }
@@ -464,9 +464,9 @@ select option { background: var(--bg-surface); color: var(--text); }
left: 0; left: 0;
right: 0; right: 0;
margin-top: 4px; margin-top: 4px;
background: var(--bg-elevated, #2a2a2e); background: var(--bg-elevated);
border: 1px solid var(--border, #2a2a2e); border: 1px solid var(--border);
border-radius: var(--radius, 6px); border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,0.5); box-shadow: 0 8px 24px rgba(0,0,0,0.5);
z-index: 300; z-index: 300;
max-height: 240px; max-height: 240px;
@@ -484,14 +484,14 @@ select option { background: var(--bg-surface); color: var(--text); }
.sw-user-picker__option:hover, .sw-user-picker__option:hover,
.sw-user-picker__option--active { .sw-user-picker__option--active {
background: var(--bg-hover, rgba(255,255,255,0.06)); background: var(--bg-hover);
} }
.sw-user-picker__avatar { .sw-user-picker__avatar {
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: var(--accent, #b38a4e); background: var(--accent);
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -509,11 +509,11 @@ select option { background: var(--bg-surface); color: var(--text); }
.sw-user-picker__name { .sw-user-picker__name {
font-size: 0.85em; font-size: 0.85em;
color: var(--text, #eee); color: var(--text);
} }
.sw-user-picker__handle { .sw-user-picker__handle {
font-size: 0.75em; font-size: 0.75em;
color: var(--text-muted, #888); color: var(--text-3);
} }

46
src/css/surfaces.css
View File

@@ -39,7 +39,7 @@
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
background: none; border: none; color: var(--text-3); background: none; border: none; color: var(--text-3);
cursor: pointer; font-family: inherit; font-size: 13px; cursor: pointer; font-family: inherit; font-size: 13px;
padding: 4px 8px; border-radius: 6px; transition: color 0.12s; padding: 4px 8px; border-radius: var(--radius); transition: color 0.12s;
} }
.settings-topbar-back:hover { color: var(--text); } .settings-topbar-back:hover { color: var(--text); }
.settings-topbar-sep { width: 1px; height: 20px; background: var(--border); } .settings-topbar-sep { width: 1px; height: 20px; background: var(--border); }
@@ -53,7 +53,7 @@
} }
.settings-nav-link { .settings-nav-link {
display: flex; align-items: center; gap: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3); border-radius: 8px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
color: var(--text-2); text-decoration: none; color: var(--text-2); text-decoration: none;
font-size: 13px; font-weight: 500; transition: all 0.12s; font-size: 13px; font-weight: 500; transition: all 0.12s;
border: none; background: none; cursor: pointer; border: none; background: none; cursor: pointer;
@@ -74,7 +74,7 @@
} }
.settings-section { .settings-section {
margin-bottom: var(--sp-6); padding: var(--sp-5); margin-bottom: var(--sp-6); padding: var(--sp-5);
background: var(--bg-surface); border-radius: 10px; background: var(--bg-surface); border-radius: var(--radius-lg);
border: 1px solid var(--border); border: 1px solid var(--border);
} }
.settings-section h3 { .settings-section h3 {
@@ -100,19 +100,19 @@
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
background: none; border: none; color: var(--text-3); background: none; border: none; color: var(--text-3);
cursor: pointer; font-family: inherit; font-size: 13px; cursor: pointer; font-family: inherit; font-size: 13px;
padding: 4px 8px; border-radius: 6px; transition: color 0.12s; padding: 4px 8px; border-radius: var(--radius); transition: color 0.12s;
} }
.admin-topbar-back:hover { color: var(--text); } .admin-topbar-back:hover { color: var(--text); }
.admin-topbar-sep { width: 1px; height: 20px; background: var(--border); } .admin-topbar-sep { width: 1px; height: 20px; background: var(--border); }
.admin-topbar-title { font-size: 15px; font-weight: 600; } .admin-topbar-title { font-size: 15px; font-weight: 600; }
.admin-category-tabs { .admin-category-tabs {
display: flex; gap: 1px; padding: 3px; display: flex; gap: 1px; padding: 3px;
background: var(--bg); border-radius: 10px; background: var(--bg); border-radius: var(--radius-lg);
border: 1px solid var(--border); margin-left: auto; border: 1px solid var(--border); margin-left: auto;
} }
.admin-cat-btn { .admin-cat-btn {
display: flex; align-items: center; gap: 6px; display: flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 7px; border: none; padding: 6px 14px; border-radius: var(--radius); border: none;
cursor: pointer; font-size: 13px; font-weight: 500; cursor: pointer; font-size: 13px; font-weight: 500;
font-family: inherit; background: transparent; color: var(--text-3); font-family: inherit; background: transparent; color: var(--text-3);
transition: all 0.12s; transition: all 0.12s;
@@ -126,7 +126,7 @@
padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
} }
.admin-nav-link { .admin-nav-link {
display: flex; padding: var(--sp-2) var(--sp-3); border-radius: 8px; display: flex; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
border: none; cursor: pointer; font-family: inherit; border: none; cursor: pointer; font-family: inherit;
font-size: 13px; font-weight: 500; width: 100%; font-size: 13px; font-weight: 500; width: 100%;
text-align: left; transition: all 0.12s; text-align: left; transition: all 0.12s;
@@ -143,7 +143,7 @@
.admin-content-header h2 { font-size: 16px; font-weight: 600; margin: 0; } .admin-content-header h2 { font-size: 16px; font-weight: 600; margin: 0; }
.admin-search { .admin-search {
display: flex; align-items: center; gap: 7px; display: flex; align-items: center; gap: 7px;
background: var(--input-bg, var(--bg)); border-radius: 8px; background: var(--input-bg, var(--bg)); border-radius: var(--radius);
padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); width: 220px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); width: 220px;
} }
.admin-search input { .admin-search input {
@@ -179,7 +179,7 @@
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
background: none; border: none; color: var(--text-3); background: none; border: none; color: var(--text-3);
cursor: pointer; font-family: inherit; font-size: 13px; cursor: pointer; font-family: inherit; font-size: 13px;
padding: 4px 8px; border-radius: 6px; padding: 4px 8px; border-radius: var(--radius);
} }
.editor-topbar-back:hover { color: var(--text); } .editor-topbar-back:hover { color: var(--text); }
.editor-body { display: flex; flex: 1; min-height: 0; } .editor-body { display: flex; flex: 1; min-height: 0; }
@@ -223,7 +223,7 @@
/* ── Stat Cards Grid ──────────────────────── */ /* ── Stat Cards Grid ──────────────────────── */
.stat-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); } .stat-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.stat-card { .stat-card {
background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4);
} }
.stat-card-label { font-size: 11px; color: var(--text-3); font-weight: 500; margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: 0.04em; } .stat-card-label { font-size: 11px; color: var(--text-3); font-weight: 500; margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-card-value { font-size: 24px; font-weight: 700; line-height: 1; } .stat-card-value { font-size: 24px; font-weight: 700; line-height: 1; }
@@ -233,8 +233,8 @@
.bar-chart { display: flex; align-items: flex-end; gap: var(--sp-2); height: 140px; } .bar-chart { display: flex; align-items: flex-end; gap: var(--sp-2); height: 140px; }
.bar-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; } .bar-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar-chart-val { font-size: 10px; color: var(--text-3); font-family: var(--mono); } .bar-chart-val { font-size: 10px; color: var(--text-3); font-family: var(--mono); }
.bar-chart-track { width: 100%; background: var(--accent-dim); border-radius: 4px; position: relative; height: 100px; } .bar-chart-track { width: 100%; background: var(--accent-dim); border-radius: var(--radius-sm); position: relative; height: 100px; }
.bar-chart-fill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--accent); border-radius: 4px; transition: height 0.3s ease; } .bar-chart-fill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--accent); border-radius: var(--radius-sm); transition: height 0.3s ease; }
.bar-chart-label { font-size: 10px; color: var(--text-3); } .bar-chart-label { font-size: 10px; color: var(--text-3); }
/* ── Admin Settings Form (flat sections, prototype match) ── */ /* ── Admin Settings Form (flat sections, prototype match) ── */
@@ -250,11 +250,11 @@
.admin-settings-form .toggle-label { margin-bottom: 8px; } .admin-settings-form .toggle-label { margin-bottom: 8px; }
/* ── Toggle Switch ────────────────────────── */ /* ── Toggle Switch ────────────────────────── */
.toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--text-1); } .toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--text); }
.toggle-label input[type="checkbox"] { display: none; } .toggle-label input[type="checkbox"] { display: none; }
.toggle-track { .toggle-track {
position: relative; width: 36px; height: 20px; flex-shrink: 0; position: relative; width: 36px; height: 20px; flex-shrink: 0;
background: var(--text-3); border-radius: 10px; transition: background 0.2s; background: var(--text-3); border-radius: var(--radius-lg); transition: background 0.2s;
} }
.toggle-track::after { .toggle-track::after {
content: ''; position: absolute; top: 2px; left: 2px; content: ''; position: absolute; top: 2px; left: 2px;
@@ -293,7 +293,7 @@
/* ── Provider Cards ──────────────────────── */ /* ── Provider Cards ──────────────────────── */
.provider-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); } .provider-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.provider-card { .provider-card {
background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: var(--sp-4); cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); padding: var(--sp-4); cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition);
} }
.provider-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .provider-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
@@ -328,7 +328,7 @@
} }
.sidebar-nav::-webkit-scrollbar { width: 4px; } .sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); }
/* Section wrapper */ /* Section wrapper */
.sb-section { margin-bottom: 2px; } .sb-section { margin-bottom: 2px; }
@@ -370,7 +370,7 @@
color: var(--text-3); color: var(--text-3);
cursor: pointer; cursor: pointer;
padding: 2px; padding: 2px;
border-radius: 4px; border-radius: var(--radius-sm);
display: flex; display: flex;
align-items: center; align-items: center;
transition: opacity 0.1s, color 0.1s; transition: opacity 0.1s, color 0.1s;
@@ -400,7 +400,7 @@
gap: 5px; gap: 5px;
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
border-radius: 6px; border-radius: var(--radius);
margin: 0 4px; margin: 0 4px;
transition: background 0.1s; transition: background 0.1s;
} }
@@ -452,7 +452,7 @@
font-size: 14px; font-size: 14px;
padding: 0 2px; padding: 0 2px;
line-height: 1; line-height: 1;
border-radius: 4px; border-radius: var(--radius-sm);
transition: opacity 0.1s; transition: opacity 0.1s;
} }
.sb-proj-header:hover .sb-proj-menu { opacity: 1; } .sb-proj-header:hover .sb-proj-menu { opacity: 1; }
@@ -486,7 +486,7 @@
align-items: center; align-items: center;
gap: 7px; gap: 7px;
padding: 5px 12px; padding: 5px 12px;
border-radius: 6px; border-radius: var(--radius);
margin: 0 4px; margin: 0 4px;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
@@ -500,7 +500,7 @@
.sb-ch-menu { .sb-ch-menu {
visibility: hidden; background: none; border: none; color: var(--text-3); cursor: pointer; visibility: hidden; background: none; border: none; color: var(--text-3); cursor: pointer;
font-size: 14px; padding: 0 4px; line-height: 1; border-radius: 3px; margin-left: auto; font-size: 14px; padding: 0 4px; line-height: 1; border-radius: var(--radius-sm); margin-left: auto;
} }
.sb-ch-menu:hover { color: var(--text); background: var(--bg-hover); } .sb-ch-menu:hover { color: var(--text); background: var(--bg-hover); }
.sb-channel-item:hover .sb-ch-menu { visibility: visible; } .sb-channel-item:hover .sb-ch-menu { visibility: visible; }
@@ -515,14 +515,14 @@
background: var(--text-3); background: var(--text-3);
flex-shrink: 0; flex-shrink: 0;
} }
.sb-presence.online { background: var(--success-light, #22c55e); } .sb-presence.online { background: var(--success-light); }
.sb-unread { .sb-unread {
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
background: var(--accent); background: var(--accent);
color: #fff; color: #fff;
border-radius: 10px; border-radius: var(--radius-lg);
padding: 1px 5px; padding: 1px 5px;
min-width: 16px; min-width: 16px;
text-align: center; text-align: center;

4
src/css/sw-debug.css
View File

@@ -31,7 +31,7 @@
.debug-check { display: flex; align-items: center; gap: 4px; color: var(--text-3); cursor: pointer; } .debug-check { display: flex; align-items: center; gap: 4px; color: var(--text-3); cursor: pointer; }
.debug-badge { .debug-badge {
font-size: 10px; background: var(--bg-raised); border: 1px solid var(--border); font-size: 10px; background: var(--bg-raised); border: 1px solid var(--border);
border-radius: 10px; padding: 1px 6px; color: var(--text-3); margin-left: auto; border-radius: var(--radius-lg); padding: 1px 6px; color: var(--text-3); margin-left: auto;
} }
.debug-content { .debug-content {
flex: 1; overflow-y: auto; padding: 6px; flex: 1; overflow-y: auto; padding: 6px;
@@ -42,7 +42,7 @@
.debug-pre { .debug-pre {
white-space: pre-wrap; word-break: break-all; white-space: pre-wrap; word-break: break-all;
max-height: 200px; overflow: auto; padding: 6px; max-height: 200px; overflow: auto; padding: 6px;
background: rgba(0,0,0,0.2); border-radius: 4px; margin: 4px 0; background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); margin: 4px 0;
} }
/* ── Console Tab ─────────────────────────── */ /* ── Console Tab ─────────────────────────── */

6
src/css/sw-login.css
View File

@@ -92,7 +92,7 @@
.login-form-field input { .login-form-field input {
width: 100%; box-sizing: border-box; background: var(--input-bg); width: 100%; box-sizing: border-box; background: var(--input-bg);
border: 1px solid var(--border); color: var(--text); border: 1px solid var(--border); color: var(--text);
padding: var(--sp-3) var(--sp-3); border-radius: 10px; font-size: 14px; font-family: var(--font); padding: var(--sp-3) var(--sp-3); border-radius: var(--radius-lg); font-size: 14px; font-family: var(--font);
outline: none; transition: border-color 0.15s, box-shadow 0.15s; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
} }
.login-form-field input:focus { .login-form-field input:focus {
@@ -101,7 +101,7 @@
.login-keep-login { .login-keep-login {
display: flex; align-items: center; gap: 6px; margin-top: 4px; display: flex; align-items: center; gap: 6px; margin-top: 4px;
font-size: 0.82rem; color: var(--text-secondary, #999); cursor: pointer; font-size: 0.82rem; color: var(--text-2); cursor: pointer;
user-select: none; user-select: none;
} }
.login-keep-login input[type="checkbox"] { margin: 0; cursor: pointer; } .login-keep-login input[type="checkbox"] { margin: 0; cursor: pointer; }
@@ -113,7 +113,7 @@
.login-btn { .login-btn {
width: 100%; background: var(--accent); color: #fff; border: none; width: 100%; background: var(--accent); color: #fff; border: none;
padding: var(--sp-3) var(--sp-5); font-size: 14px; border-radius: 10px; cursor: pointer; padding: var(--sp-3) var(--sp-5); font-size: 14px; border-radius: var(--radius-lg); cursor: pointer;
font-family: var(--font); font-weight: 600; letter-spacing: -0.01em; font-family: var(--font); font-weight: 600; letter-spacing: -0.01em;
transition: all 0.18s; margin-top: 1.5rem; transition: all 0.18s; margin-top: 1.5rem;
} }

12
src/css/sw-primitives.css
View File

@@ -13,7 +13,7 @@
white-space: nowrap; position: relative; white-space: nowrap; position: relative;
} }
.sw-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sw-btn--sm { padding: var(--sp-1) var(--sp-2); font-size: 0.8rem; } .sw-btn--sm { padding: var(--sp-1h) var(--sp-2h); font-size: 0.8rem; }
.sw-btn--md { padding: var(--sp-2) var(--sp-3); font-size: 0.875rem; } .sw-btn--md { padding: var(--sp-2) var(--sp-3); font-size: 0.875rem; }
.sw-btn--lg { padding: var(--sp-2) var(--sp-4); font-size: 1rem; } .sw-btn--lg { padding: var(--sp-2) var(--sp-4); font-size: 1rem; }
@@ -72,7 +72,7 @@
/* ── Shared input ──────────────────────────── */ /* ── Shared input ──────────────────────────── */
.sw-input { .sw-input {
width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--input-bg); width: 100%; padding: var(--sp-2) var(--sp-2h); background: var(--input-bg);
color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
font-family: var(--font); font-size: 0.875rem; outline: none; font-family: var(--font); font-size: 0.875rem; outline: none;
transition: border-color var(--transition); transition: border-color var(--transition);
@@ -184,7 +184,7 @@
} }
.sw-menu__item { .sw-menu__item {
display: flex; align-items: center; gap: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: 0.85rem; padding: var(--sp-1h) var(--sp-3); cursor: pointer; font-size: 0.85rem;
color: var(--text); transition: background var(--transition); color: var(--text); transition: background var(--transition);
} }
.sw-menu__item:hover, .sw-menu__item--focused { background: var(--bg-hover); } .sw-menu__item:hover, .sw-menu__item--focused { background: var(--bg-hover); }
@@ -197,7 +197,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.sw-menu { max-width: calc(100vw - 16px); } .sw-menu { max-width: calc(100vw - 16px); }
.sw-menu__item { min-height: 44px; padding: var(--sp-2) var(--sp-3); } .sw-menu__item { min-height: 44px; padding: var(--sp-2h) var(--sp-3); }
} }
/* ── Drawer ────────────────────────────────── */ /* ── Drawer ────────────────────────────────── */
@@ -243,7 +243,7 @@
} }
.sw-tabs__scroll::-webkit-scrollbar { display: none; } .sw-tabs__scroll::-webkit-scrollbar { display: none; }
.sw-tabs__tab { .sw-tabs__tab {
padding: var(--sp-2) var(--sp-3); background: none; border: none; padding: var(--sp-2h) var(--sp-3); background: none; border: none;
border-bottom: 2px solid transparent; color: var(--text-2); border-bottom: 2px solid transparent; color: var(--text-2);
font-family: var(--font); font-size: 0.85rem; font-weight: 500; font-family: var(--font); font-size: 0.85rem; font-weight: 500;
cursor: pointer; white-space: nowrap; cursor: pointer; white-space: nowrap;
@@ -282,7 +282,7 @@
} }
.sw-dropdown__search { margin: var(--sp-1); width: calc(100% - var(--sp-2)); } .sw-dropdown__search { margin: var(--sp-1); width: calc(100% - var(--sp-2)); }
.sw-dropdown__option { .sw-dropdown__option {
padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: 0.85rem; padding: var(--sp-1h) var(--sp-3); cursor: pointer; font-size: 0.85rem;
color: var(--text); transition: background var(--transition); color: var(--text); transition: background var(--transition);
} }
.sw-dropdown__option:hover, .sw-dropdown__option--focused { background: var(--bg-hover); } .sw-dropdown__option:hover, .sw-dropdown__option--focused { background: var(--bg-hover); }

48
src/css/sw-shell.css
View File

@@ -166,7 +166,7 @@
cursor: pointer; cursor: pointer;
padding: 2px; padding: 2px;
border-radius: 50%; border-radius: 50%;
transition: box-shadow var(--transition, 0.15s ease); transition: box-shadow var(--transition);
} }
.sw-user-menu__trigger:hover { .sw-user-menu__trigger:hover {
box-shadow: 0 0 0 2px var(--accent-dim); box-shadow: 0 0 0 2px var(--accent-dim);
@@ -191,28 +191,28 @@
height: 32px; height: 32px;
background: none; background: none;
border: none; border: none;
border-radius: 6px; border-radius: var(--radius);
color: var(--text-3, #555); color: var(--text-3);
cursor: pointer; cursor: pointer;
transition: color 0.15s, background 0.15s; transition: color 0.15s, background 0.15s;
} }
.sw-notification-bell__trigger:hover { .sw-notification-bell__trigger:hover {
color: var(--text, #eee); color: var(--text);
background: var(--bg, #0e0e10); background: var(--bg);
} }
.sw-notification-bell__badge { .sw-notification-bell__badge {
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 2px; right: 2px;
background: var(--danger, #ef4444); background: var(--danger);
color: #fff; color: #fff;
font-size: 9px; font-size: 9px;
font-weight: 700; font-weight: 700;
min-width: 14px; min-width: 14px;
height: 14px; height: 14px;
border-radius: 7px; border-radius: var(--radius);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -227,9 +227,9 @@
margin-top: 6px; margin-top: 6px;
width: 320px; width: 320px;
max-height: 420px; max-height: 420px;
background: var(--bg-secondary, #151517); background: var(--bg-secondary);
border: 1px solid var(--border, #2a2a2e); border: 1px solid var(--border);
border-radius: 10px; border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(0,0,0,0.4); box-shadow: 0 8px 32px rgba(0,0,0,0.4);
z-index: 200; z-index: 200;
overflow: hidden; overflow: hidden;
@@ -242,24 +242,24 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--sp-3) var(--sp-3); padding: var(--sp-3) var(--sp-3);
border-bottom: 1px solid var(--border, #2a2a2e); border-bottom: 1px solid var(--border);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: var(--text, #eee); color: var(--text);
} }
.sw-notification-bell__mark-all { .sw-notification-bell__mark-all {
background: none; background: none;
border: none; border: none;
color: var(--accent, #b38a4e); color: var(--accent);
font-size: 11px; font-size: 11px;
cursor: pointer; cursor: pointer;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: var(--radius-sm);
} }
.sw-notification-bell__mark-all:hover { .sw-notification-bell__mark-all:hover {
background: var(--accent-dim, rgba(179, 138, 78, 0.1)); background: var(--accent-dim);
} }
.sw-notification-bell__list { .sw-notification-bell__list {
@@ -270,13 +270,13 @@
.sw-notification-bell__empty { .sw-notification-bell__empty {
padding: var(--sp-6) var(--sp-3); padding: var(--sp-6) var(--sp-3);
text-align: center; text-align: center;
color: var(--text-3, #555); color: var(--text-3);
font-size: 12px; font-size: 12px;
} }
.sw-notification-bell__item { .sw-notification-bell__item {
padding: var(--sp-3) var(--sp-3); padding: var(--sp-3) var(--sp-3);
border-bottom: 1px solid var(--border, #2a2a2e); border-bottom: 1px solid var(--border);
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: background 0.15s;
} }
@@ -286,11 +286,11 @@
} }
.sw-notification-bell__item:hover { .sw-notification-bell__item:hover {
background: var(--bg, #0e0e10); background: var(--bg);
} }
.sw-notification-bell__item--unread { .sw-notification-bell__item--unread {
background: var(--accent-dim, rgba(179, 138, 78, 0.05)); background: var(--accent-dim);
} }
.sw-notification-bell__item--unread::before { .sw-notification-bell__item--unread::before {
@@ -299,27 +299,27 @@
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: var(--accent, #b38a4e); background: var(--accent);
margin-right: 8px; margin-right: 8px;
vertical-align: middle; vertical-align: middle;
} }
.sw-notification-bell__item-text { .sw-notification-bell__item-text {
font-size: 12px; font-size: 12px;
color: var(--text, #eee); color: var(--text);
display: inline; display: inline;
} }
.sw-notification-bell__item-body { .sw-notification-bell__item-body {
font-size: 11px; font-size: 11px;
color: var(--text-3, #555); color: var(--text-3);
margin-top: 3px; margin-top: 3px;
line-height: 1.4; line-height: 1.4;
} }
.sw-notification-bell__item-time { .sw-notification-bell__item-time {
font-size: 10px; font-size: 10px;
color: var(--text-3, #555); color: var(--text-3);
margin-top: 3px; margin-top: 3px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -332,7 +332,7 @@
.sw-notification-bell__item-action { .sw-notification-bell__item-action {
font-size: 10px; font-size: 10px;
color: var(--accent, #4a9eff); color: var(--accent);
font-weight: 600; font-weight: 600;
opacity: 0; opacity: 0;
transition: opacity 0.15s; transition: opacity 0.15s;

12
src/css/tool-grants.css
View File

@@ -1,9 +1,9 @@
/* v0.25.0: Tool grants section in persona form */ /* v0.25.0: Tool grants section in persona form */
.tool-grants-list { .tool-grants-list {
border: 1px solid var(--border, #2a2a2e); border: 1px solid var(--border);
border-radius: 6px; border-radius: var(--radius);
padding: 8px; padding: 8px;
background: var(--bg, #0e0e10); background: var(--bg);
} }
.tool-grants-category { .tool-grants-category {
@@ -11,7 +11,7 @@
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: var(--text-3, #777); color: var(--text-3);
padding: 6px 0 2px; padding: 6px 0 2px;
margin-top: 4px; margin-top: 4px;
} }
@@ -27,9 +27,9 @@
gap: 6px; gap: 6px;
padding: 3px 4px; padding: 3px 4px;
font-size: 12px; font-size: 12px;
color: var(--text, #eee); color: var(--text);
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: var(--radius-sm);
} }
.tool-grants-item:hover { .tool-grants-item:hover {

10
src/css/user-menu.css
View File

@@ -21,10 +21,10 @@
align-items: center; align-items: center;
gap: var(--sp-2); gap: var(--sp-2);
padding: var(--sp-2) var(--sp-2); padding: var(--sp-2) var(--sp-2);
border-radius: var(--radius, 6px); border-radius: var(--radius);
background: none; background: none;
border: none; border: none;
color: var(--text, #eee); color: var(--text);
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
font-family: inherit; font-family: inherit;
@@ -32,7 +32,7 @@
} }
.user-menu-wrap .user-btn:hover { .user-menu-wrap .user-btn:hover {
background: var(--bg-hover, rgba(255,255,255,0.06)); background: var(--bg-hover);
} }
/* ── Avatar ────────────────────────────────── */ /* ── Avatar ────────────────────────────────── */
@@ -41,13 +41,13 @@
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: var(--accent-dim, rgba(179, 138, 78, 0.2)); background: var(--accent-dim);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--accent, #b38a4e); color: var(--accent);
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
overflow: hidden; overflow: hidden;

41
src/css/variables.css
View File

@@ -2,7 +2,39 @@
Theme variables, reset, base styles Theme variables, reset, base styles
──────────────────────────────────────────── */ ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ── Self-hosted fonts (zero external dependencies) ── */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('../fonts/dm-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 500;
font-display: swap;
src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 500;
font-display: swap;
src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ========================================== /* ==========================================
Armature Armature
@@ -59,6 +91,7 @@
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
/* ── Layout ──────────────────────────────── */ /* ── Layout ──────────────────────────────── */
--radius-sm: 4px;
--radius: 8px; --radius: 8px;
--radius-lg: 12px; --radius-lg: 12px;
--sidebar-w: 260px; --sidebar-w: 260px;
@@ -67,9 +100,11 @@
--mono: 'JetBrains Mono', 'Söhne Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; --mono: 'JetBrains Mono', 'Söhne Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
--transition: 180ms ease; --transition: 180ms ease;
/* -- Spacing (4px grid) ------------------- */ /* -- Spacing (4px grid + half-steps) ------- */
--sp-1: 0.25rem; /* 4px */ --sp-1: 0.25rem; /* 4px */
--sp-1h: 0.375rem; /* 6px */
--sp-2: 0.5rem; /* 8px */ --sp-2: 0.5rem; /* 8px */
--sp-2h: 0.625rem; /* 10px */
--sp-3: 0.75rem; /* 12px */ --sp-3: 0.75rem; /* 12px */
--sp-4: 1rem; /* 16px */ --sp-4: 1rem; /* 16px */
--sp-5: 1.25rem; /* 20px */ --sp-5: 1.25rem; /* 20px */
@@ -149,7 +184,7 @@ body { font-family: var(--font); background: var(--bg); color: var(--text); over
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); } ::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
a { color: var(--accent); text-decoration: none; } a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; } a:hover { text-decoration: underline; }

18
src/css/workflow.css
View File

@@ -10,7 +10,7 @@
gap: 8px; gap: 8px;
padding: 8px 10px; padding: 8px 10px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: var(--radius);
margin-bottom: 4px; margin-bottom: 4px;
background: var(--bg-surface); background: var(--bg-surface);
cursor: grab; cursor: grab;
@@ -35,7 +35,7 @@
.sb-queue-badge { .sb-queue-badge {
background: var(--accent); background: var(--accent);
color: #fff; color: #fff;
border-radius: 10px; border-radius: var(--radius-lg);
padding: 1px 7px; padding: 1px 7px;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
@@ -47,7 +47,7 @@
gap: 8px; gap: 8px;
padding: 6px 12px; padding: 6px 12px;
cursor: pointer; cursor: pointer;
border-radius: 6px; border-radius: var(--radius);
font-size: 13px; font-size: 13px;
transition: background 0.15s; transition: background 0.15s;
} }
@@ -79,7 +79,7 @@
/* Browse workflows button */ /* Browse workflows button */
.sb-queue-browse { .sb-queue-browse {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 6px 12px; cursor: pointer; border-radius: 6px; padding: 6px 12px; cursor: pointer; border-radius: var(--radius);
font-size: 12px; color: var(--text-3); transition: background 0.15s; font-size: 12px; color: var(--text-3); transition: background 0.15s;
} }
.sb-queue-browse:hover { background: var(--bg-raised); color: var(--text-2); } .sb-queue-browse:hover { background: var(--bg-raised); color: var(--text-2); }
@@ -90,7 +90,7 @@
.wf-browse-dialog { max-height: 300px; overflow-y: auto; } .wf-browse-dialog { max-height: 300px; overflow-y: auto; }
.wf-browse-row { .wf-browse-row {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 8px 12px; cursor: pointer; border-radius: 6px; padding: 8px 12px; cursor: pointer; border-radius: var(--radius);
font-size: 13px; transition: background 0.15s; font-size: 13px; transition: background 0.15s;
} }
.wf-browse-row:hover { background: var(--bg-raised); } .wf-browse-row:hover { background: var(--bg-raised); }
@@ -109,7 +109,7 @@
/* ── Admin badges ────────────────────── */ /* ── Admin badges ────────────────────── */
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--bg-raised); color: var(--text-2); } .badge { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-lg); background: var(--bg-raised); color: var(--text-2); }
.badge-ok { background: rgba(46, 160, 67, 0.15); color: #2ea043; } .badge-ok { background: rgba(46, 160, 67, 0.15); color: #2ea043; }
.badge-warn { background: rgba(210, 153, 34, 0.15); color: #d29922; } .badge-warn { background: rgba(210, 153, 34, 0.15); color: #d29922; }
@@ -143,7 +143,7 @@
.wf-bar-status { .wf-bar-status {
font-size: 11px; font-size: 11px;
padding: 1px 8px; padding: 1px 8px;
border-radius: 10px; border-radius: var(--radius-lg);
} }
.wf-bar-status.active { background: var(--accent-dim); color: var(--accent); } .wf-bar-status.active { background: var(--accent-dim); color: var(--accent); }
.wf-bar-status.completed { background: var(--success-dim); color: var(--success-light); } .wf-bar-status.completed { background: var(--success-dim); color: var(--success-light); }
@@ -164,7 +164,7 @@
gap: 6px; gap: 6px;
padding: 6px 8px; padding: 6px 8px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: var(--radius);
margin-bottom: 4px; margin-bottom: 4px;
background: var(--bg-surface); background: var(--bg-surface);
flex-wrap: wrap; flex-wrap: wrap;
@@ -177,7 +177,7 @@
font-size: 12px; font-size: 12px;
padding: 4px 6px; padding: 4px 6px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: var(--radius-sm);
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
} }

BIN
src/fonts/dm-sans-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
src/fonts/dm-sans-latin.woff2 Normal file
View File

Binary file not shown.

BIN
src/fonts/jetbrains-mono-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
src/fonts/jetbrains-mono-latin.woff2 Normal file
View File

Binary file not shown.

22
src/js/sw/primitives/menu.js
View File

@@ -16,14 +16,28 @@ export function Menu({ items = [], anchor, open, direction = 'down-right', onSel
const selectableItems = items.filter(i => !i.divider && !i.disabled); const selectableItems = items.filter(i => !i.divider && !i.disabled);
// Position relative to anchor (CSS zoom reflows layout correctly) // Position relative to anchor, accounting for CSS zoom on #surfaceInner.
// getBoundingClientRect() returns viewport coords, but position:fixed inside
// a zoomed ancestor needs coords divided by the zoom factor.
useEffect(() => { useEffect(() => {
if (!open || !anchor) return; if (!open || !anchor) return;
const rect = typeof anchor.getBoundingClientRect === 'function' const rawRect = typeof anchor.getBoundingClientRect === 'function'
? anchor.getBoundingClientRect() ? anchor.getBoundingClientRect()
: anchor; : anchor;
const vw = window.innerWidth;
const vh = window.innerHeight; // Detect CSS zoom on surface container
const zoomEl = document.getElementById('surfaceInner');
const zoom = zoomEl ? (parseFloat(zoomEl.style.zoom) || 1) : 1;
// Convert viewport coords to zoom-space
const rect = {
top: rawRect.top / zoom,
bottom: rawRect.bottom / zoom,
left: rawRect.left / zoom,
right: rawRect.right / zoom,
};
const vw = window.innerWidth / zoom;
const vh = window.innerHeight / zoom;
let top, left; let top, left;
const [vDir, hDir] = direction.split('-'); const [vDir, hDir] = direction.split('-');

2
src/js/sw/surfaces/settings/appearance.js
View File

@@ -23,7 +23,7 @@ function getPrefs() {
export function AppearanceSection() { export function AppearanceSection() {
const prefs = getPrefs(); const prefs = getPrefs();
const [theme, setTheme] = useState(sw.theme?.current || 'system'); const [theme, setTheme] = useState(sw.theme?.mode || 'system');
const [scale, setScale] = useState(prefs.scale || 100); const [scale, setScale] = useState(prefs.scale || 100);
const applyTheme = useCallback((mode) => { const applyTheme = useCallback((mode) => {