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

Feat v0.6.14 visual polish (#49)
All checks were successful
CI/CD / detect-changes (push) Successful in 4s
Details
CI/CD / test-frontend (push) Successful in 5s
Details
CI/CD / test-go-pg (push) Successful in 2m42s
Details
CI/CD / test-sqlite (push) Successful in 3m1s
Details
CI/CD / build-and-deploy (push) Successful in 1m8s
Details

Browse Source 
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #49.
This commit is contained in:
Jeffrey Smith
2026-04-01 13:25:04 +00:00
committed by xcaliber
parent 3af62a9cc5
commit c9b9e68c18
35 changed files with 436 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

31
ROADMAP-UI.md
View File

@@ -83,18 +83,27 @@ 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
(`--radius-sm`, `--radius`, `--radius-lg`). Also fixed v0.6.13 spacing
regressions (half-step tokens), theme settings default, surface overflow,
and user menu zoom drift. See CHANGELOG.md.
### v0.6.15 — User Display Audit
Every place a user identity appears in the UI must show a human-readable
name, never a UUID. Fallback chain: `display_name → username → "Unknown"`.
| Step | Description | | Step | Description |
|------|-------------| |------|-------------|
| 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. | | Participant display-name resolution | `chat-core` participants endpoint resolves `display_name` from the users table at query time instead of relying on a creation-time snapshot. If the stored `display_name` is empty, look up `users.display_name` or `users.username` by `participant_id`. |
| 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. | | Audit all user-facing identity surfaces | Walk every surface that shows user identity: chat participant list, chat message sender names, chat typing indicators, workflow assignees, team member lists, admin user list, notification actor names. Ensure the fallback chain is `display_name → username → "Unknown"` everywhere. |
| 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. | | SDK user-resolve utility | Add `sw.users.resolve(id)` or similar to the SDK — returns `{id, username, display_name, avatar}` with local caching. Surfaces use this instead of ad-hoc lookups. |
| 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`. | | Stale snapshot cleanup | Remove or deprecate the static `display_name` column in the participants table. All display names come from the users table via the resolve utility. |
### v0.6.15 — Usability Survey Gate ### v0.6.16 — Usability Survey Gate
Make the UI machine-auditable so Claude Code can run an automated survey. Make the UI machine-auditable so Claude Code can run an automated survey.
@@ -105,7 +114,7 @@ Make the UI machine-auditable so Claude Code can run an automated survey.
| Component coverage matrix | Markdown table: each kernel primitive (button, input, dropdown, dialog, toast, menu, tabs, avatar, spinner, tooltip, drawer, banner) × each surface that uses it. Identifies surfaces still using deprecated old-style components. | | Component coverage matrix | Markdown table: each kernel primitive (button, input, dropdown, dialog, toast, menu, tabs, avatar, spinner, tooltip, drawer, banner) × each surface that uses it. Identifies surfaces still using deprecated old-style components. |
| Touch target audit | Script that finds all `<button>`, `[role=button]`, clickable elements across templates and JS, checks for `min-width/min-height ≥ 44px` on mobile breakpoint. | | Touch target audit | Script that finds all `<button>`, `[role=button]`, clickable elements across templates and JS, checks for `min-width/min-height ≥ 44px` on mobile breakpoint. |
| Claude Code survey prompt | `docs/USABILITY-SURVEY.md` — structured prompt template that Claude Code can execute against the codebase. Sections: viewport correctness, banner integration, responsive behavior, styling consistency, accessibility basics (contrast, touch targets, focus indicators), component uniformity. Each section has pass/fail criteria and file paths to inspect. | | Claude Code survey prompt | `docs/USABILITY-SURVEY.md` — structured prompt template that Claude Code can execute against the codebase. Sections: viewport correctness, banner integration, responsive behavior, styling consistency, accessibility basics (contrast, touch targets, focus indicators), component uniformity. Each section has pass/fail criteria and file paths to inspect. |
| Survey dry-run | Run the survey. Fix anything it catches. Tag `v0.6.15` only after clean survey. | | Survey dry-run | Run the survey. Fix anything it catches. Tag `v0.6.16` only after clean survey. |
--- ---
@@ -122,9 +131,11 @@ 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 User Display Audit ← No UUIDs in the UI, ever
↓
v0.6.16 Usability Survey Gate ← Machine-audit the finished product
``` ```
Each version is independently shippable and testable. No version depends on Each version is independently shippable and testable. No version depends on

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) => {