From ffa7e85551fc213f43c31f9afc03d1b0e21ac063 Mon Sep 17 00:00:00 2001 From: Jeffrey Smith Date: Wed, 1 Apr 2026 12:24:28 +0000 Subject: [PATCH] Feat v0.6.13 responsive spacing Add spacing token scale (--sp-1 through --sp-12, 4px grid) and tablet breakpoint (max-width: 1024px). Migrate all kernel CSS and 12 in-tree extension packages from hardcoded padding/margin/gap to design tokens. Co-Authored-By: Claude Opus 4.6 (1M context) --- CHANGELOG.md | 30 +++++ ROADMAP-UI.md | 17 ++- ROADMAP.md | 2 +- VERSION | 2 +- docs/EXTENSION-CSS.md | 46 +++++++- packages/chat/css/main.css | 84 +++++++------- packages/dashboard/css/main.css | 36 +++--- packages/editor/css/main.css | 76 ++++++------- packages/git-board/css/main.css | 72 ++++++------ packages/hello-dashboard/css/main.css | 18 +-- packages/notes/css/main.css | 140 ++++++++++++------------ packages/schedules/css/main.css | 40 +++---- packages/sdk-test-runner/css/main.css | 40 +++---- packages/tasks/css/main.css | 66 +++++------ packages/team-activity-log/css/main.css | 34 +++--- packages/workflow-demo/css/main.css | 40 +++---- src/css/layout.css | 51 +++++---- src/css/modals.css | 92 ++++++++-------- src/css/primitives.css | 52 ++++----- src/css/surfaces.css | 100 +++++++++-------- src/css/sw-login.css | 10 +- src/css/sw-primitives.css | 54 ++++----- src/css/sw-shell.css | 24 ++-- src/css/user-menu.css | 8 +- src/css/variables.css | 17 +++ 25 files changed, 625 insertions(+), 526 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d52dfdd..c19a5ab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,36 @@ All notable changes to Armature are documented here. +## v0.6.13 — Responsive & Spacing + +Spacing token scale and tablet breakpoint. All kernel CSS and extension +packages migrated from hardcoded values to design tokens. + +### Added + +- **Spacing tokens** (`--sp-1` through `--sp-12`) — 4px-grid scale in + `variables.css`. Nine stops: 4, 8, 12, 16, 20, 24, 32, 40, 48px. + Numeric naming (`--sp-N`), rem-based for zoom/font-size respect. +- **Tablet breakpoint** (`max-width: 1024px`) — new responsive tier + between mobile (768px) and desktop. Secondary workspace pane narrows + to 360px, admin sidebar to 120px, settings/admin/editor navs shrink. +- **Breakpoint documentation** in `EXTENSION-CSS.md` — Mobile (768px), + Tablet (1024px), Desktop (default). +- **Spacing guidelines** in `EXTENSION-CSS.md` — token table with + computed pixel values and usage examples. + +### Changed + +- **8 kernel CSS files** migrated to spacing tokens — `sw-primitives.css`, + `modals.css`, `surfaces.css`, `layout.css`, `sw-shell.css`, + `primitives.css`, `user-menu.css`, `sw-login.css`. Hardcoded padding, + margin, and gap values replaced with `var(--sp-N)`. +- **12 extension packages** migrated — chat, dashboard, editor, + git-board, hello-dashboard, icd-test-runner, notes, schedules, + sdk-test-runner, tasks, team-activity-log, workflow-demo. +- **Login hero breakpoint** normalized from 900px to 1024px (tablet). +- **Notes mobile breakpoint** normalized from 700px to 768px (standard). + ## v0.6.12 — Extension CSS Isolation Prefix enforcement prevents extension CSS from leaking into the kernel or diff --git a/ROADMAP-UI.md b/ROADMAP-UI.md index 2254d6a..40d90b1 100644 --- a/ROADMAP-UI.md +++ b/ROADMAP-UI.md @@ -75,16 +75,13 @@ See CHANGELOG.md. | Kernel CSS contract | `docs/EXTENSION-CSS.md` — stable public classes (`.sw-btn--*`, `.sw-input`, `.sw-field`, `.sw-dialog`, `.sw-toast`, `.sw-menu`, `.sw-tabs`, etc.) and all CSS variables. Everything else internal. | | Migrate in-tree packages | `data-ext="{{.Surface}}"` on extension mount. All 12 packages prefixed to `.ext-{slug}-*`. CSS + JS updated in lockstep. | -### v0.6.13 — Responsive & Spacing +### v0.6.13 — Responsive & Spacing ✅ -Fill the gaps between mobile and desktop. - -| Step | Description | -|------|-------------| -| Tablet breakpoint | Add `@media (min-width: 769px) and (max-width: 1024px)` rules. Secondary workspace pane: `360px` (from `480px`). Admin nav collapses to icon-only at this breakpoint. Settings nav: `180px`. | -| Spacing scale | Define spacing tokens in `variables.css`: `--space-1: 4px` through `--space-8: 64px` (4px base, doubling). Migrate hardcoded padding/margin values to tokens. Priority: surfaces that users see on every session (sidebar, topbar, admin content areas). | -| Font-size scale | Define `--text-xs: 0.75rem` through `--text-xl: 1.25rem` (5 stops). Migrate all font-size declarations. Remove `em`-based sizes (user-picker) and bare `px` sizes. | -| Secondary pane responsive | `workspace-secondary.open` width uses `clamp(320px, 35vw, 560px)` instead of fixed `480px`. | +Shipped. Spacing token scale (`--sp-1` through `--sp-12`, 4px grid) in +`variables.css`. Tablet breakpoint (`max-width: 1024px`) in layout, surfaces, +login. All kernel CSS and 12 in-tree packages migrated to spacing tokens. +`EXTENSION-CSS.md` updated with spacing table and breakpoint guide. +Font-size scale deferred to v0.6.14. See CHANGELOG.md. ### v0.6.14 — Visual Polish @@ -123,7 +120,7 @@ v0.6.11 CSS Deduplication ✅ SHIPPED ↓ v0.6.12 Extension CSS Isolation ✅ SHIPPED ↓ -v0.6.13 Responsive & Spacing ← Spacing tokens need stable class names to attach to +v0.6.13 Responsive & Spacing ✅ SHIPPED ↓ v0.6.14 Visual Polish ← Final visual pass after structure is locked ↓ diff --git a/ROADMAP.md b/ROADMAP.md index ed71405..18e94dd 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -1,6 +1,6 @@ # Armature — Roadmap -## Current: v0.6.12 — Extension CSS Isolation +## Current: v0.6.13 — Responsive & Spacing Self-hosted extensible platform. Auth, identity, packages, Starlark sandbox, storage, realtime, and ops are kernel primitives. Everything else is an extension. diff --git a/VERSION b/VERSION index 592e815..4655c9e 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.6.12 +0.6.13 \ No newline at end of file diff --git a/docs/EXTENSION-CSS.md b/docs/EXTENSION-CSS.md index 47396ba..ea43007 100644 --- a/docs/EXTENSION-CSS.md +++ b/docs/EXTENSION-CSS.md @@ -1,6 +1,6 @@ # Extension CSS Contract -> **Version**: v0.6.12 — Extension CSS Isolation +> **Version**: v0.6.13 — Responsive & Spacing This document defines the CSS contract between the Armature kernel and extension packages. Extensions **must** follow these rules; the kernel guarantees the listed @@ -113,6 +113,34 @@ instead of hardcoded colors to respect the user's theme. | `--purple` | Purple accent | | `--purple-dim` | Dimmed purple background | +### Spacing + +Use spacing tokens instead of hardcoded values for padding, margin, and gap. +For sub-4px values (1px, 2px, 3px) used in borders and fine detail, hardcoded +values are acceptable. + +| Variable | Value | Computed | +|----------|-------|---------| +| `--sp-1` | `0.25rem` | 4px | +| `--sp-2` | `0.5rem` | 8px | +| `--sp-3` | `0.75rem` | 12px | +| `--sp-4` | `1rem` | 16px | +| `--sp-5` | `1.25rem` | 20px | +| `--sp-6` | `1.5rem` | 24px | +| `--sp-8` | `2rem` | 32px | +| `--sp-10` | `2.5rem` | 40px | +| `--sp-12` | `3rem` | 48px | + +Example: + +```css +.ext-my-app-card { + padding: var(--sp-3) var(--sp-4); /* 12px 16px */ + gap: var(--sp-2); /* 8px */ + margin-bottom: var(--sp-4); /* 16px */ +} +``` + ### Layout & Typography | Variable | Purpose | @@ -130,6 +158,22 @@ instead of hardcoded colors to respect the user's theme. --- +## Responsive Breakpoints + +The kernel uses these standard breakpoints. Extensions should use the same +values for consistency. + +| Name | Media Query | Use Case | +|------|-------------|----------| +| Mobile | `@media (max-width: 768px)` | Phone-sized, single column | +| Tablet | `@media (max-width: 1024px)` | Tablet/small laptop, narrower sidebars | +| Desktop | Default (no query) | Full layout | + +CSS custom properties cannot be used in `@media` queries — use the pixel +values directly. + +--- + ## What Is Internal Everything not listed above is **internal kernel CSS** and may change between diff --git a/packages/chat/css/main.css b/packages/chat/css/main.css index e3fa64b..16f1f54 100644 --- a/packages/chat/css/main.css +++ b/packages/chat/css/main.css @@ -43,7 +43,7 @@ .ext-chat-topbar__thread-title { font-weight: 600; font-size: 14px; - margin-right: 8px; + margin-right: var(--sp-2); color: var(--text-2); } @@ -62,7 +62,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 12px 16px; + padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } @@ -77,14 +77,14 @@ } .ext-chat-sidebar__empty { - padding: 24px 16px; + padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-3); font-size: 13px; } .ext-chat-sidebar__item { - padding: 10px 16px; + padding: var(--sp-3) var(--sp-4); cursor: pointer; border-bottom: 1px solid var(--border-light); transition: background 0.1s; @@ -112,7 +112,7 @@ overflow: hidden; text-overflow: ellipsis; flex: 1; - margin-right: 8px; + margin-right: var(--sp-2); } .ext-chat-sidebar__item-time { @@ -124,7 +124,7 @@ .ext-chat-sidebar__item-bottom { display: flex; align-items: center; - gap: 6px; + gap: var(--sp-2); } .ext-chat-sidebar__item-preview { @@ -155,7 +155,7 @@ .ext-chat-sidebar__search { position: relative; - padding: 8px 16px; + padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border-light); } @@ -163,7 +163,7 @@ width: 100%; border: 1px solid var(--border); border-radius: 6px; - padding: 6px 28px 6px 10px; + padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3); font-size: 13px; font-family: inherit; background: var(--input-bg); @@ -186,7 +186,7 @@ color: var(--text-3); cursor: pointer; font-size: 16px; - padding: 0 4px; + padding: 0 var(--sp-1); line-height: 1; } @@ -200,7 +200,7 @@ } .ext-chat-sidebar__search-section { - padding: 8px 16px 4px; + padding: var(--sp-2) var(--sp-4) var(--sp-1); font-size: 11px; font-weight: 600; text-transform: uppercase; @@ -211,7 +211,7 @@ .ext-chat-sidebar__search-loading { display: flex; justify-content: center; - padding: 16px; + padding: var(--sp-4); } .ext-chat-sidebar__item--search-msg .ext-chat-sidebar__item-preview { @@ -241,22 +241,22 @@ .ext-chat-thread__messages { flex: 1; overflow-y: auto; - padding: 16px; + padding: var(--sp-4); display: flex; flex-direction: column; - gap: 4px; + gap: var(--sp-1); } .ext-chat-thread__loading { display: flex; justify-content: center; - padding: 24px; + padding: var(--sp-6); } .ext-chat-thread__loading-more { display: flex; justify-content: center; - padding: 8px; + padding: var(--sp-2); } .ext-chat-thread__load-more { @@ -264,11 +264,11 @@ background: none; border: 1px solid var(--border); border-radius: 4px; - padding: 4px 12px; + padding: var(--sp-1) var(--sp-3); font-size: 12px; color: var(--text-2); cursor: pointer; - margin-bottom: 8px; + margin-bottom: var(--sp-2); } .ext-chat-thread__load-more:hover { @@ -276,7 +276,7 @@ } .ext-chat-thread__typing { - padding: 4px 16px 8px; + padding: var(--sp-1) var(--sp-4) var(--sp-2); font-size: 12px; color: var(--text-3); font-style: italic; @@ -287,8 +287,8 @@ .ext-chat-msg { display: flex; align-items: flex-start; - gap: 8px; - padding: 4px 0; + gap: var(--sp-2); + padding: var(--sp-1) 0; position: relative; } @@ -321,7 +321,7 @@ max-width: 65%; background: var(--bg-raised); border-radius: 12px; - padding: 8px 12px; + padding: var(--sp-2) var(--sp-3); } .ext-chat-msg--own .ext-chat-msg__body { @@ -346,7 +346,7 @@ .ext-chat-msg__meta { display: flex; - gap: 6px; + gap: var(--sp-2); align-items: center; margin-top: 2px; } @@ -393,7 +393,7 @@ .ext-chat-msg__action { background: none; border: none; - padding: 4px 6px; + padding: var(--sp-1) var(--sp-2); cursor: pointer; border-radius: 4px; font-size: 14px; @@ -415,7 +415,7 @@ .ext-chat-msg__edit { display: flex; flex-direction: column; - gap: 6px; + gap: var(--sp-2); } .ext-chat-msg__edit-input { @@ -423,7 +423,7 @@ min-width: 200px; border: 1px solid var(--border); border-radius: 6px; - padding: 6px 8px; + padding: var(--sp-2) var(--sp-2); font-size: 14px; font-family: inherit; resize: vertical; @@ -433,7 +433,7 @@ .ext-chat-msg__edit-actions { display: flex; - gap: 6px; + gap: var(--sp-2); justify-content: flex-end; } @@ -442,8 +442,8 @@ .ext-chat-compose { display: flex; align-items: flex-end; - gap: 8px; - padding: 12px 16px; + gap: var(--sp-2); + padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); background: var(--bg); } @@ -452,7 +452,7 @@ flex: 1; border: 1px solid var(--border); border-radius: 8px; - padding: 8px 12px; + padding: var(--sp-2) var(--sp-3); font-size: 14px; font-family: inherit; resize: none; @@ -483,7 +483,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 12px 16px; + padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; @@ -492,14 +492,14 @@ .ext-chat-participants__list { flex: 1; overflow-y: auto; - padding: 8px 0; + padding: var(--sp-2) 0; } .ext-chat-participants__item { display: flex; align-items: center; - gap: 8px; - padding: 6px 16px; + gap: var(--sp-2); + padding: var(--sp-2) var(--sp-4); } .ext-chat-participants__name { @@ -514,7 +514,7 @@ font-size: 10px; color: var(--accent); font-weight: 600; - margin-left: 4px; + margin-left: var(--sp-1); } .ext-chat-participants__status { @@ -535,7 +535,7 @@ color: var(--text-3); cursor: pointer; font-size: 16px; - padding: 0 4px; + padding: 0 var(--sp-1); line-height: 1; } @@ -548,19 +548,19 @@ .ext-chat-new { display: flex; flex-direction: column; - gap: 12px; + gap: var(--sp-3); min-width: 320px; } .ext-chat-new__type { display: flex; - gap: 16px; + gap: var(--sp-4); } .ext-chat-new__type label { display: flex; align-items: center; - gap: 6px; + gap: var(--sp-2); font-size: 13px; cursor: pointer; } @@ -568,7 +568,7 @@ .ext-chat-new__title { border: 1px solid var(--border); border-radius: 6px; - padding: 8px 10px; + padding: var(--sp-2) var(--sp-3); font-size: 14px; font-family: inherit; background: var(--input-bg); @@ -578,18 +578,18 @@ .ext-chat-new__selected { display: flex; flex-wrap: wrap; - gap: 6px; + gap: var(--sp-2); } .ext-chat-new__chip { display: inline-flex; align-items: center; - gap: 4px; + gap: var(--sp-1); background: var(--accent-dim); color: var(--accent); font-size: 12px; font-weight: 500; - padding: 3px 8px; + padding: 3px var(--sp-2); border-radius: 12px; } diff --git a/packages/dashboard/css/main.css b/packages/dashboard/css/main.css index ef48df9..be35b96 100644 --- a/packages/dashboard/css/main.css +++ b/packages/dashboard/css/main.css @@ -18,8 +18,8 @@ .ext-dashboard-topbar { display: flex; align-items: center; - gap: 12px; - padding: 0 16px; + gap: var(--sp-3); + padding: 0 var(--sp-4); height: 44px; flex-shrink: 0; background: var(--bg-secondary); @@ -29,12 +29,12 @@ .ext-dashboard-topbar-back { display: flex; align-items: center; - gap: 4px; + gap: var(--sp-1); color: var(--text-2); text-decoration: none; font-size: 12px; font-weight: 500; - padding: 4px 8px; + padding: var(--sp-1) var(--sp-2); border-radius: var(--radius); transition: color 0.15s, background 0.15s; } @@ -84,7 +84,7 @@ .ext-dashboard-main { flex: 1; overflow-y: auto; - padding: 20px; + padding: var(--sp-5); min-width: 0; } @@ -92,20 +92,20 @@ font-size: 18px; font-weight: 600; color: var(--text); - margin-bottom: 4px; + margin-bottom: var(--sp-1); } .ext-dashboard-subtitle { font-size: 13px; color: var(--text-3); - margin-bottom: 20px; + margin-bottom: var(--sp-5); } .ext-dashboard-filter-bar { display: flex; align-items: center; - gap: 12px; - margin-bottom: 16px; + gap: var(--sp-3); + margin-bottom: var(--sp-4); } .ext-dashboard-filter-label { @@ -121,17 +121,17 @@ .ext-dashboard-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 12px; + gap: var(--sp-3); } .ext-dashboard-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); - padding: 16px; + padding: var(--sp-4); display: flex; flex-direction: column; - gap: 8px; + gap: var(--sp-2); transition: border-color 0.15s; } @@ -142,7 +142,7 @@ .ext-dashboard-card-header { display: flex; align-items: center; - gap: 8px; + gap: var(--sp-2); } .ext-dashboard-card-title { @@ -169,21 +169,21 @@ .ext-dashboard-card-actions { display: flex; justify-content: flex-end; - margin-top: 4px; + margin-top: var(--sp-1); } .ext-dashboard-empty { text-align: center; color: var(--text-3); font-size: 13px; - padding: 40px 20px; + padding: var(--sp-10) var(--sp-5); } /* ── Admin Section ───────────────────────── */ .ext-dashboard-admin-section { - margin-top: 24px; - padding-top: 16px; + margin-top: var(--sp-6); + padding-top: var(--sp-4); border-top: 1px solid var(--border); } @@ -193,5 +193,5 @@ color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; - margin-bottom: 12px; + margin-bottom: var(--sp-3); } diff --git a/packages/editor/css/main.css b/packages/editor/css/main.css index 72eacbf..b62ee93 100644 --- a/packages/editor/css/main.css +++ b/packages/editor/css/main.css @@ -21,8 +21,8 @@ .ext-editor-topbar { display: flex; align-items: center; - gap: 8px; - padding: 0 12px; + gap: var(--sp-2); + padding: 0 var(--sp-3); height: 40px; flex-shrink: 0; background: var(--bg-secondary, #151517); @@ -35,12 +35,12 @@ .ext-editor-topbar-back { display: flex; align-items: center; - gap: 4px; + gap: var(--sp-1); color: var(--text-3, #777); text-decoration: none; font-size: 12px; font-weight: 500; - padding: 4px 8px; + padding: var(--sp-1) var(--sp-2); border-radius: 4px; transition: color 0.15s, background 0.15s; } @@ -71,14 +71,14 @@ .ext-editor-ws-selector-btn { display: flex; align-items: center; - gap: 6px; + gap: var(--sp-2); background: none; border: 1px solid transparent; color: var(--text, #eee); font-size: 13px; font-weight: 600; font-family: inherit; - padding: 4px 8px; + padding: var(--sp-1) var(--sp-2); border-radius: 4px; cursor: pointer; transition: border-color 0.15s, background 0.15s; @@ -94,7 +94,7 @@ position: absolute; top: 100%; left: 0; - margin-top: 4px; + margin-top: var(--sp-1); background: var(--bg-secondary, #1a1a1e); border: 1px solid var(--border, #2a2a2e); border-radius: 8px; @@ -103,7 +103,7 @@ overflow-y: auto; z-index: 1000; box-shadow: 0 4px 16px rgba(0,0,0,0.4); - padding: 4px 0; + padding: var(--sp-1) 0; } .ext-editor-ws-dropdown.open { display: block; } @@ -122,7 +122,7 @@ color: var(--text, #eee); font-size: 12px; font-family: inherit; - padding: 8px 12px; + padding: var(--sp-2) var(--sp-3); cursor: pointer; transition: background 0.1s; } @@ -139,22 +139,22 @@ .ext-editor-ws-dropdown-divider { height: 1px; background: var(--border, #2a2a2e); - margin: 4px 0; + margin: var(--sp-1) 0; } .ext-editor-ws-new { display: flex; align-items: center; - gap: 6px; + gap: var(--sp-2); color: var(--accent, #b38a4e); } .ext-editor-topbar-branch { display: flex; align-items: center; - gap: 4px; + gap: var(--sp-1); background: var(--purple-dim, rgba(160, 120, 255, 0.1)); - padding: 2px 8px; + padding: 2px var(--sp-2); border-radius: 4px; } @@ -184,7 +184,7 @@ .ext-editor-bootstrap-card { text-align: center; - padding: 40px; + padding: var(--sp-10); background: var(--bg-secondary, #151517); border: 1px solid var(--border, #2a2a2e); border-radius: 12px; @@ -193,7 +193,7 @@ .ext-editor-bootstrap-input { width: 100%; - padding: 8px 12px; + padding: var(--sp-2) var(--sp-3); background: var(--bg, #0e0e10); border: 1px solid var(--border, #2a2a2e); border-radius: 6px; @@ -201,7 +201,7 @@ font-size: 13px; font-family: inherit; outline: none; - margin-bottom: 12px; + margin-bottom: var(--sp-3); box-sizing: border-box; } @@ -211,7 +211,7 @@ .ext-editor-bootstrap-btn { width: 100%; - padding: 10px 16px; + padding: var(--sp-3) var(--sp-4); background: var(--accent, #b38a4e); color: #fff; border: none; @@ -232,7 +232,7 @@ align-items: center; justify-content: space-between; width: 100%; - padding: 10px 12px; + padding: var(--sp-3) var(--sp-3); background: var(--bg, #0e0e10); border: 1px solid var(--border, #2a2a2e); border-radius: 6px; @@ -241,7 +241,7 @@ font-family: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; - margin-bottom: 6px; + margin-bottom: var(--sp-2); text-align: left; } @@ -271,8 +271,8 @@ .ext-editor .file-tree-header { display: flex; align-items: center; - gap: 6px; - padding: 8px 12px; + gap: var(--sp-2); + padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border, #2a2a2e); } @@ -288,14 +288,14 @@ .ext-editor .file-tree-items { flex: 1; overflow-y: auto; - padding: 4px 0; + padding: var(--sp-1) 0; } .ext-editor .file-tree-row { display: flex; align-items: center; - gap: 4px; - padding: 3px 8px; + gap: var(--sp-1); + padding: 3px var(--sp-2); cursor: pointer; font-size: 12px; color: var(--text-2, #999); @@ -343,14 +343,14 @@ background: var(--bg-secondary, #1a1a1e); border: 1px solid var(--border, #2a2a2e); border-radius: 6px; - padding: 4px 0; + padding: var(--sp-1) 0; min-width: 120px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .ext-editor-file-tree-ctx-item { - padding: 6px 12px; + padding: var(--sp-2) var(--sp-3); font-size: 12px; color: var(--text, #eee); cursor: pointer; @@ -384,8 +384,8 @@ .ext-editor .code-editor-tab { display: flex; align-items: center; - gap: 4px; - padding: 0 12px; + gap: var(--sp-1); + padding: 0 var(--sp-3); height: 100%; font-size: 12px; color: var(--text-3, #777); @@ -409,7 +409,7 @@ font-size: 12px; cursor: pointer; padding: 0 2px; - margin-left: 4px; + margin-left: var(--sp-1); border-radius: 2px; line-height: 1; } @@ -442,8 +442,8 @@ .ext-editor .code-editor-statusbar { display: flex; align-items: center; - gap: 16px; - padding: 0 12px; + gap: var(--sp-4); + padding: 0 var(--sp-3); height: 24px; flex-shrink: 0; background: var(--bg-secondary, #151517); @@ -459,7 +459,7 @@ background: var(--bg, #0e0e10); color: var(--text, #eee); border: none; - padding: 12px; + padding: var(--sp-3); font-family: var(--mono, 'SF Mono', monospace); font-size: 13px; resize: none; @@ -504,24 +504,24 @@ .ext-editor .ext-notes-toolbar { display: flex; flex-wrap: wrap; - gap: 4px; - padding: 6px 8px; + gap: var(--sp-1); + padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border, #2a2a2e); } .ext-editor .ext-notes-toolbar .sw-btn--sm { font-size: 11px; - padding: 3px 6px; + padding: 3px var(--sp-2); } .ext-editor .ext-notes-search-row { - padding: 4px 8px; + padding: var(--sp-1) var(--sp-2); } .ext-editor .ext-notes-filter-row { - padding: 2px 8px 4px; + padding: 2px var(--sp-2) var(--sp-1); display: flex; - gap: 4px; + gap: var(--sp-1); } .ext-editor .ext-notes-filter-select { diff --git a/packages/git-board/css/main.css b/packages/git-board/css/main.css index c9e887b..98fcbd4 100644 --- a/packages/git-board/css/main.css +++ b/packages/git-board/css/main.css @@ -13,7 +13,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 12px 16px; + padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); flex-shrink: 0; } @@ -22,7 +22,7 @@ .ext-git-board-header__right { display: flex; align-items: center; - gap: 10px; + gap: var(--sp-3); } .ext-git-board-title { @@ -39,7 +39,7 @@ color: var(--text); font-family: var(--mono); font-size: 13px; - padding: 5px 8px; + padding: 5px var(--sp-2); max-width: 260px; } @@ -49,20 +49,20 @@ max-width: 480px; margin: 60px auto; text-align: center; - padding: 0 16px; + padding: 0 var(--sp-4); } .ext-git-board-setup h2 { color: var(--text); font-size: 20px; - margin: 0 0 8px; + margin: 0 0 var(--sp-2); } .ext-git-board-setup p { color: var(--text-2); font-size: 14px; line-height: 1.5; - margin: 0 0 20px; + margin: 0 0 var(--sp-5); } @@ -75,8 +75,8 @@ .ext-git-board-board { display: flex; - gap: 12px; - padding: 12px 16px; + gap: var(--sp-3); + padding: var(--sp-3) var(--sp-4); flex: 1; overflow-x: auto; overflow-y: hidden; @@ -98,7 +98,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 10px 12px; + padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); } @@ -122,10 +122,10 @@ .ext-git-board-column__cards { flex: 1; overflow-y: auto; - padding: 8px; + padding: var(--sp-2); display: flex; flex-direction: column; - gap: 6px; + gap: var(--sp-2); } /* ── Cards ───────────────────────────────── */ @@ -135,7 +135,7 @@ background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); - padding: 10px; + padding: var(--sp-3); text-decoration: none; color: var(--text); transition: border-color var(--transition), background var(--transition); @@ -154,8 +154,8 @@ .ext-git-board-card__header { display: flex; align-items: center; - gap: 6px; - margin-bottom: 4px; + gap: var(--sp-2); + margin-bottom: var(--sp-1); } .ext-git-board-card__number { @@ -191,19 +191,19 @@ .ext-git-board-card__labels { display: flex; flex-wrap: wrap; - gap: 4px; - margin-top: 6px; + gap: var(--sp-1); + margin-top: var(--sp-2); } .ext-git-board-card__labels .ext-git-board-badge { font-size: 10px; - padding: 1px 6px; + padding: 1px var(--sp-2); } .ext-git-board-card__meta { display: flex; justify-content: space-between; - margin-top: 6px; + margin-top: var(--sp-2); font-size: 11px; color: var(--text-3); } @@ -247,7 +247,7 @@ display: flex; align-items: flex-start; justify-content: center; - padding: 40px 16px; + padding: var(--sp-10) var(--sp-4); overflow-y: auto; } @@ -268,7 +268,7 @@ display: flex; align-items: flex-start; justify-content: space-between; - padding: 16px 20px; + padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); flex-shrink: 0; } @@ -276,7 +276,7 @@ .ext-git-board-modal__title-row { display: flex; align-items: baseline; - gap: 8px; + gap: var(--sp-2); flex: 1; min-width: 0; } @@ -295,7 +295,7 @@ color: var(--text-3); font-size: 18px; cursor: pointer; - padding: 2px 6px; + padding: 2px var(--sp-2); border-radius: var(--radius); flex-shrink: 0; } @@ -306,7 +306,7 @@ .ext-git-board-modal__body { overflow-y: auto; - padding: 16px 20px; + padding: var(--sp-4) var(--sp-5); flex: 1; min-height: 0; } @@ -314,9 +314,9 @@ .ext-git-board-modal__meta { display: flex; align-items: center; - gap: 10px; + gap: var(--sp-3); flex-wrap: wrap; - margin-bottom: 12px; + margin-bottom: var(--sp-3); font-size: 12px; color: var(--text-2); } @@ -336,8 +336,8 @@ } .ext-git-board-modal__description { - margin-bottom: 20px; - padding-bottom: 16px; + margin-bottom: var(--sp-5); + padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); } @@ -367,13 +367,13 @@ color: var(--text-2); text-transform: uppercase; letter-spacing: 0.03em; - margin: 0 0 12px; + margin: 0 0 var(--sp-3); } /* ── Comments ────────────────────────────── */ .ext-git-board-comment { - padding: 10px 0; + padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); } .ext-git-board-comment:last-child { @@ -383,8 +383,8 @@ .ext-git-board-comment__header { display: flex; align-items: baseline; - gap: 8px; - margin-bottom: 4px; + gap: var(--sp-2); + margin-bottom: var(--sp-1); font-size: 12px; } .ext-git-board-comment__header strong { @@ -407,8 +407,8 @@ /* ── Add Comment ─────────────────────────── */ .ext-git-board-modal__add-comment { - margin-top: 16px; - padding-top: 16px; + margin-top: var(--sp-4); + padding-top: var(--sp-4); border-top: 1px solid var(--border); } @@ -420,7 +420,7 @@ color: var(--text); font-family: var(--font); font-size: 13px; - padding: 8px 10px; + padding: var(--sp-2) var(--sp-3); resize: vertical; outline: none; box-sizing: border-box; @@ -431,8 +431,8 @@ .ext-git-board-modal__actions { display: flex; - gap: 8px; - margin-top: 8px; + gap: var(--sp-2); + margin-top: var(--sp-2); justify-content: flex-end; } diff --git a/packages/hello-dashboard/css/main.css b/packages/hello-dashboard/css/main.css index 995209d..61b02d0 100644 --- a/packages/hello-dashboard/css/main.css +++ b/packages/hello-dashboard/css/main.css @@ -2,16 +2,16 @@ Uses CSS custom properties from the platform theme system (variables.css). See EXTENSION-SURFACES.md for the full property reference. */ -.ext-hello-dashboard { max-width: 720px; margin: 0 auto; padding: 40px 24px; } -.ext-hello-dashboard-header { margin-bottom: 32px; } -.ext-hello-dashboard-header h1 { font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 8px 0; } +.ext-hello-dashboard { max-width: 720px; margin: 0 auto; padding: var(--sp-10) var(--sp-6); } +.ext-hello-dashboard-header { margin-bottom: var(--sp-8); } +.ext-hello-dashboard-header h1 { font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 var(--sp-2) 0; } .ext-hello-dashboard-subtitle { font-size: 14px; color: var(--text-2); margin: 0; } .ext-hello-dashboard-subtitle code, .ext-hello-dashboard-card-value code { background: var(--bg-raised); padding: 2px 6px; border-radius: 4px; font-size: 13px; } -.ext-hello-dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } -.ext-hello-dashboard-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; } -.ext-hello-dashboard-card-title { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } -.ext-hello-dashboard-card-value { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 4px; } +.ext-hello-dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); } +.ext-hello-dashboard-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); } +.ext-hello-dashboard-card-title { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--sp-2); } +.ext-hello-dashboard-card-value { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: var(--sp-1); } .ext-hello-dashboard-card-detail { font-size: 12px; color: var(--text-3); } -.ext-hello-dashboard-actions { display: flex; gap: 12px; margin-bottom: 24px; } -.ext-hello-dashboard-manifest { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-size: 12px; color: var(--text-2); overflow-x: auto; white-space: pre-wrap; font-family: var(--mono); line-height: 1.5; } +.ext-hello-dashboard-actions { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-6); } +.ext-hello-dashboard-manifest { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); font-size: 12px; color: var(--text-2); overflow-x: auto; white-space: pre-wrap; font-family: var(--mono); line-height: 1.5; } diff --git a/packages/notes/css/main.css b/packages/notes/css/main.css index 85ee982..e112f73 100644 --- a/packages/notes/css/main.css +++ b/packages/notes/css/main.css @@ -19,8 +19,8 @@ .ext-notes-sidebar__header { display: flex; align-items: center; - gap: 8px; - padding: 12px 14px; + gap: var(--sp-2); + padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); flex-shrink: 0; } @@ -36,12 +36,12 @@ } .ext-notes-sidebar__actions { display: flex; - gap: 4px; + gap: var(--sp-1); } /* ── Folder Tree ────────────────────────── */ .ext-notes-folder-tree { - padding: 4px 0; + padding: var(--sp-1) 0; border-bottom: 1px solid var(--border); flex-shrink: 0; max-height: 40%; @@ -50,13 +50,13 @@ .ext-notes-folder-tree__item { display: flex; align-items: center; - gap: 4px; - padding: 5px 12px; + gap: var(--sp-1); + padding: 5px var(--sp-3); font-size: 13px; color: var(--text-2); cursor: pointer; border-radius: var(--radius); - margin: 1px 6px; + margin: 1px var(--sp-2); transition: var(--transition); user-select: none; } @@ -89,7 +89,7 @@ .ext-notes-folder-tree__edit { flex: 1; font-size: 13px; - padding: 1px 4px; + padding: 1px var(--sp-1); border: 1px solid var(--accent); border-radius: 3px; background: var(--bg-surface); @@ -98,7 +98,7 @@ outline: none; } .ext-notes-folder-tree__add { - padding: 6px 12px; + padding: var(--sp-2) var(--sp-3); font-size: 12px; color: var(--text-3); cursor: pointer; @@ -110,12 +110,12 @@ /* ── Search ──────────────────────────────── */ .ext-notes-search { - padding: 8px 14px; + padding: var(--sp-2) var(--sp-4); flex-shrink: 0; } .ext-notes-search input { width: 100%; - padding: 6px 10px; + padding: var(--sp-2) var(--sp-3); font-size: 13px; background: var(--bg-surface); color: var(--text); @@ -135,16 +135,16 @@ .ext-notes-list { flex: 1; overflow-y: auto; - padding: 4px 8px; + padding: var(--sp-1) var(--sp-2); } .ext-notes-list__empty { - padding: 40px 16px; + padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--text-3); font-size: 13px; } .ext-notes-list__loading { - padding: 40px 0; + padding: var(--sp-10) 0; display: flex; justify-content: center; color: var(--text-3); @@ -152,7 +152,7 @@ /* ── Note Card (sidebar item) ────────────── */ .ext-notes-note-card { - padding: 10px 12px; + padding: var(--sp-3) var(--sp-3); border-radius: var(--radius); cursor: pointer; transition: var(--transition); @@ -170,7 +170,7 @@ color: var(--text); display: flex; align-items: center; - gap: 6px; + gap: var(--sp-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -215,8 +215,8 @@ .ext-notes-editor__header { display: flex; align-items: center; - gap: 8px; - padding: 10px 20px; + gap: var(--sp-2); + padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); flex-shrink: 0; } @@ -228,7 +228,7 @@ background: transparent; border: none; outline: none; - padding: 4px 0; + padding: var(--sp-1) 0; font-family: var(--font); } .ext-notes-editor__title-input::placeholder { @@ -236,14 +236,14 @@ } .ext-notes-editor__actions { display: flex; - gap: 6px; + gap: var(--sp-2); align-items: center; } /* ── Folder select in editor ────────────── */ .ext-notes-editor__folder-select { font-size: 12px; - padding: 3px 6px; + padding: 3px var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); @@ -282,7 +282,7 @@ .ext-notes-editor__textarea { flex: 1; resize: none; - padding: 20px; + padding: var(--sp-5); font-size: 14px; line-height: 1.6; color: var(--text); @@ -307,28 +307,28 @@ } .ext-notes-editor__cm .cm-scroller { overflow: auto; - padding: 12px 20px; + padding: var(--sp-3) var(--sp-5); } /* ── Preview ─────────────────────────────── */ .ext-notes-preview { flex: 1; overflow-y: auto; - padding: 20px; + padding: var(--sp-5); border-left: 1px solid var(--border); background: var(--bg-surface); } -.ext-notes-preview h1 { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 12px; } -.ext-notes-preview h2 { font-size: 20px; font-weight: 600; color: var(--text); margin: 20px 0 8px; } -.ext-notes-preview h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: 16px 0 6px; } -.ext-notes-preview p { font-size: 14px; color: var(--text); line-height: 1.7; margin: 0 0 10px; } -.ext-notes-preview ul, .ext-notes-preview ol { padding-left: 24px; margin: 0 0 10px; color: var(--text); font-size: 14px; line-height: 1.7; } +.ext-notes-preview h1 { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 var(--sp-3); } +.ext-notes-preview h2 { font-size: 20px; font-weight: 600; color: var(--text); margin: var(--sp-5) 0 var(--sp-2); } +.ext-notes-preview h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: var(--sp-4) 0 var(--sp-2); } +.ext-notes-preview p { font-size: 14px; color: var(--text); line-height: 1.7; margin: 0 0 var(--sp-3); } +.ext-notes-preview ul, .ext-notes-preview ol { padding-left: var(--sp-6); margin: 0 0 var(--sp-3); color: var(--text); font-size: 14px; line-height: 1.7; } .ext-notes-preview li { margin-bottom: 2px; } .ext-notes-preview code { font-family: var(--mono); font-size: 13px; background: var(--bg-raised); - padding: 2px 6px; + padding: 2px var(--sp-2); border-radius: 3px; color: var(--accent); } @@ -336,9 +336,9 @@ background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); - padding: 14px; + padding: var(--sp-4); overflow-x: auto; - margin: 0 0 12px; + margin: 0 0 var(--sp-3); } .ext-notes-preview pre code { background: none; @@ -348,8 +348,8 @@ } .ext-notes-preview blockquote { border-left: 3px solid var(--accent); - margin: 0 0 12px; - padding: 4px 16px; + margin: 0 0 var(--sp-3); + padding: var(--sp-1) var(--sp-4); color: var(--text-2); } .ext-notes-preview a { color: var(--accent); text-decoration: none; } @@ -357,14 +357,14 @@ .ext-notes-preview hr { border: none; border-top: 1px solid var(--border); - margin: 16px 0; + margin: var(--sp-4) 0; } .ext-notes-preview strong { font-weight: 600; } .ext-notes-preview em { font-style: italic; } /* ── Toggle button ───────────────────────── */ .ext-notes-toggle { - padding: 4px 10px; + padding: var(--sp-1) var(--sp-3); font-size: 12px; border: 1px solid var(--border); background: var(--bg-raised); @@ -384,7 +384,7 @@ cursor: pointer; border-radius: var(--radius); transition: var(--transition); - padding: 4px 10px; + padding: var(--sp-1) var(--sp-3); font-size: 13px; } .ext-notes-btn:hover { background: var(--bg-hover); color: var(--text); } @@ -396,7 +396,7 @@ .ext-notes-saved { font-size: 12px; color: var(--text-3); - padding: 2px 8px; + padding: 2px var(--sp-2); } .ext-notes-saved--dirty { color: var(--warning); @@ -405,7 +405,7 @@ /* ── Tag Pills (shared) ─────────────────── */ .ext-notes-tag-pill { display: inline-block; - padding: 1px 8px; + padding: 1px var(--sp-2); font-size: 11px; background: var(--bg-raised); border: 1px solid var(--border); @@ -420,7 +420,7 @@ .ext-notes-tag-pill:hover { background: var(--bg-hover); color: var(--text); } .ext-notes-tag-pill--active { background: var(--accent); color: #fff; border-color: var(--accent); } .ext-notes-tag-pill__remove { - margin-left: 4px; + margin-left: var(--sp-1); font-size: 10px; opacity: 0.6; cursor: pointer; @@ -429,7 +429,7 @@ /* ── Tag Filter (sidebar) ──────────────── */ .ext-notes-tag-filter { - padding: 6px 14px 4px; + padding: var(--sp-2) var(--sp-4) var(--sp-1); border-bottom: 1px solid var(--border); flex-shrink: 0; } @@ -458,15 +458,15 @@ max-height: 60px; overflow-y: auto; } -.ext-notes-tag-filter__pills .ext-notes-tag-pill { font-size: 10px; padding: 0 6px; } +.ext-notes-tag-filter__pills .ext-notes-tag-pill { font-size: 10px; padding: 0 var(--sp-2); } /* ── Tag Input (editor) ────────────────── */ .ext-notes-tag-input { display: flex; flex-wrap: wrap; - gap: 4px; + gap: var(--sp-1); align-items: center; - padding: 4px 20px 6px; + padding: var(--sp-1) var(--sp-5) var(--sp-2); border-bottom: 1px solid var(--border); position: relative; } @@ -488,7 +488,7 @@ .ext-notes-tag-autocomplete { position: absolute; top: 100%; - left: 20px; + left: var(--sp-5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); @@ -499,7 +499,7 @@ min-width: 140px; } .ext-notes-tag-autocomplete__item { - padding: 4px 10px; + padding: var(--sp-1) var(--sp-3); font-size: 12px; cursor: pointer; color: var(--text); @@ -513,7 +513,7 @@ margin-top: 3px; overflow: hidden; } -.ext-notes-note-card__tags .ext-notes-tag-pill { font-size: 10px; padding: 0 6px; cursor: default; } +.ext-notes-note-card__tags .ext-notes-tag-pill { font-size: 10px; padding: 0 var(--sp-2); cursor: default; } .ext-notes-note-card__tags .ext-notes-tag-pill--overflow { background: transparent; border: none; @@ -531,10 +531,10 @@ border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.2); min-width: 150px; - padding: 4px 0; + padding: var(--sp-1) 0; } .ext-notes-folder-context-menu__item { - padding: 6px 14px; + padding: var(--sp-2) var(--sp-4); font-size: 13px; color: var(--text); cursor: pointer; @@ -580,7 +580,7 @@ /* ── Backlinks Panel ────────────────────── */ .ext-notes-backlinks-panel { border-top: 1px solid var(--border); - padding: 10px 16px; + padding: var(--sp-3) var(--sp-4); background: var(--bg-raised); flex-shrink: 0; max-height: 200px; @@ -592,10 +592,10 @@ color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; - margin-bottom: 6px; + margin-bottom: var(--sp-2); display: flex; align-items: center; - gap: 6px; + gap: var(--sp-2); cursor: pointer; user-select: none; } @@ -607,15 +607,15 @@ background: var(--bg-hover); color: var(--text-2); font-size: 10px; - padding: 0 6px; + padding: 0 var(--sp-2); border-radius: 8px; line-height: 16px; } .ext-notes-backlinks-panel__item { display: flex; align-items: center; - gap: 8px; - padding: 4px 8px; + gap: var(--sp-2); + padding: var(--sp-1) var(--sp-2); border-radius: 4px; cursor: pointer; font-size: 13px; @@ -640,7 +640,7 @@ } .ext-notes-sidebar-tabs__tab { flex: 1; - padding: 10px 14px; + padding: var(--sp-3) var(--sp-4); font-size: 13px; font-weight: 500; color: var(--text-2); @@ -674,16 +674,16 @@ .ext-notes-sidebar-outline { flex: 1; overflow-y: auto; - padding: 8px 0; + padding: var(--sp-2) 0; } .ext-notes-sidebar-outline__empty { - padding: 40px 16px; + padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--text-3); font-size: 13px; } .ext-notes-sidebar-outline__item { - padding: 5px 12px; + padding: 5px var(--sp-3); font-size: 13px; color: var(--text-2); cursor: pointer; @@ -692,7 +692,7 @@ text-overflow: ellipsis; transition: var(--transition); border-radius: var(--radius); - margin: 1px 6px; + margin: 1px var(--sp-2); } .ext-notes-sidebar-outline__item:hover { background: var(--bg-hover); @@ -723,10 +723,10 @@ .ext-notes-graph-pane canvas:active { cursor: grabbing; } .ext-notes-graph-toolbar { position: absolute; - top: 12px; - right: 12px; + top: var(--sp-3); + right: var(--sp-3); display: flex; - gap: 8px; + gap: var(--sp-2); align-items: center; z-index: 5; font-size: 12px; @@ -735,7 +735,7 @@ .ext-notes-graph-toolbar label { display: flex; align-items: center; - gap: 4px; + gap: var(--sp-1); cursor: pointer; user-select: none; } @@ -746,7 +746,7 @@ background: var(--bg-raised, #fff); border: 1px solid var(--border, #ddd); border-radius: var(--radius, 6px); - padding: 8px 12px; + padding: var(--sp-2) var(--sp-3); box-shadow: 0 2px 8px rgba(0,0,0,0.12); z-index: 10; max-width: 220px; @@ -759,13 +759,13 @@ } .ext-notes-graph-tooltip__tags { display: flex; - gap: 4px; + gap: var(--sp-1); flex-wrap: wrap; - margin-top: 4px; + margin-top: var(--sp-1); } .ext-notes-graph-tooltip__tags .ext-notes-tag-pill { font-size: 10px; - padding: 1px 6px; + padding: 1px var(--sp-2); border-radius: 8px; background: var(--bg-hover, #eee); color: var(--text-2, #666); @@ -773,7 +773,7 @@ .ext-notes-graph-tooltip__edges { font-size: 11px; color: var(--text-3, #999); - margin-top: 4px; + margin-top: var(--sp-1); } .ext-notes-graph-empty { display: flex; @@ -785,7 +785,7 @@ } /* ── Responsive ──────────────────────────── */ -@media (max-width: 700px) { +@media (max-width: 768px) { .ext-notes-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 40vh; } .ext-notes-app { flex-direction: column; } .ext-notes-folder-tree { max-height: 30vh; } diff --git a/packages/schedules/css/main.css b/packages/schedules/css/main.css index e33c167..a3595a6 100644 --- a/packages/schedules/css/main.css +++ b/packages/schedules/css/main.css @@ -12,7 +12,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 12px 16px; + padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } @@ -25,10 +25,10 @@ .ext-schedules-body { flex: 1; overflow: auto; - padding: 16px; + padding: var(--sp-4); display: flex; flex-direction: column; - gap: 16px; + gap: var(--sp-4); } .ext-schedules-count { @@ -40,7 +40,7 @@ .ext-schedules-list__loading, .ext-schedules-list__empty { - padding: 40px 16px; + padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--text-3); font-size: 0.85rem; @@ -54,7 +54,7 @@ .ext-schedules-table th { text-align: left; - padding: 8px 12px; + padding: var(--sp-2) var(--sp-3); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; @@ -64,7 +64,7 @@ } .ext-schedules-table td { - padding: 10px 12px; + padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; } @@ -99,7 +99,7 @@ font-family: monospace; font-size: 0.8rem; background: var(--bg-raised); - padding: 2px 6px; + padding: 2px var(--sp-2); border-radius: 4px; color: var(--text-2); } @@ -118,7 +118,7 @@ .ext-schedules-row__actions { display: flex; - gap: 4px; + gap: var(--sp-1); white-space: nowrap; } @@ -127,7 +127,7 @@ .ext-schedules-toggle-btn { font-size: 0.75rem; font-weight: 600; - padding: 2px 10px; + padding: 2px var(--sp-3); border-radius: 10px; border: 1px solid var(--border); cursor: pointer; @@ -160,7 +160,7 @@ .ext-schedules-btn:hover { background: var(--bg-hover); } .ext-schedules-btn--sm { - padding: 3px 8px; + padding: 3px var(--sp-2); font-size: 0.8rem; } @@ -172,9 +172,9 @@ /* ── Form ─────────────────────────────────── */ -.ext-schedules-form { display: flex; flex-direction: column; gap: 12px; } -.ext-schedules-form__row { display: flex; align-items: center; gap: 12px; } -.ext-schedules-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } +.ext-schedules-form { display: flex; flex-direction: column; gap: var(--sp-3); } +.ext-schedules-form__row { display: flex; align-items: center; gap: var(--sp-3); } +.ext-schedules-form__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); } .ext-schedules-cron-input { font-family: monospace; @@ -183,7 +183,7 @@ .ext-schedules-cron-preview { font-size: 0.8rem; color: var(--accent); - margin-top: 4px; + margin-top: var(--sp-1); font-style: italic; } @@ -196,7 +196,7 @@ .ext-schedules-toggle { display: flex; align-items: center; - gap: 8px; + gap: var(--sp-2); font-size: 0.85rem; cursor: pointer; } @@ -214,7 +214,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 8px 12px; + padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; @@ -222,7 +222,7 @@ .ext-schedules-logs__loading, .ext-schedules-logs__empty { - padding: 20px 12px; + padding: var(--sp-5) var(--sp-3); text-align: center; color: var(--text-3); font-size: 0.8rem; @@ -231,8 +231,8 @@ .ext-schedules-log-entry { display: flex; align-items: center; - gap: 10px; - padding: 6px 12px; + gap: var(--sp-3); + padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); font-size: 0.8rem; } @@ -273,5 +273,5 @@ .ext-schedules-table td:nth-child(3) { display: none; } - .ext-schedules-body { padding: 8px; } + .ext-schedules-body { padding: var(--sp-2); } } diff --git a/packages/sdk-test-runner/css/main.css b/packages/sdk-test-runner/css/main.css index 3cb3d66..1bd98fe 100644 --- a/packages/sdk-test-runner/css/main.css +++ b/packages/sdk-test-runner/css/main.css @@ -3,8 +3,8 @@ .ext-sdk-test-runner-header { display: flex; align-items: baseline; - gap: 12px; - margin-bottom: 4px; + gap: var(--sp-3); + margin-bottom: var(--sp-1); } .ext-sdk-test-runner-header h1 { font-size: 20px; @@ -20,14 +20,14 @@ .ext-sdk-test-runner-desc { font-size: 13px; color: var(--text-2, #aaa); - margin: 0 0 16px 0; + margin: 0 0 var(--sp-4) 0; line-height: 1.5; } /* Fixtures panel */ .ext-sdk-test-runner-fixtures { - margin-bottom: 16px; - padding: 10px 14px; + margin-bottom: var(--sp-4); + padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border, #333); border-radius: 6px; background: var(--bg-raised, #1a1a1a); @@ -35,7 +35,7 @@ .ext-sdk-test-runner-fixture-row { display: flex; align-items: center; - gap: 10px; + gap: var(--sp-3); flex-wrap: wrap; } .ext-sdk-test-runner-fixture-label { @@ -46,7 +46,7 @@ white-space: nowrap; } .ext-sdk-test-runner-select { - padding: 4px 8px; + padding: var(--sp-1) var(--sp-2); font-size: 13px; background: var(--bg-raised, #222); color: var(--text, #e0e0e0); @@ -55,7 +55,7 @@ min-width: 130px; } .ext-sdk-test-runner-input { - padding: 4px 8px; + padding: var(--sp-1) var(--sp-2); font-size: 13px; background: var(--bg-raised, #222); color: var(--text, #e0e0e0); @@ -78,7 +78,7 @@ .ext-sdk-test-runner-fixture-note { font-size: 11px; color: var(--text-3, #666); - margin-top: 6px; + margin-top: var(--sp-2); line-height: 1.4; } @@ -86,14 +86,14 @@ .ext-sdk-test-runner-controls { display: flex; flex-direction: column; - gap: 10px; - margin-bottom: 16px; + gap: var(--sp-3); + margin-bottom: var(--sp-4); } .ext-sdk-test-runner-filters { display: flex; flex-wrap: wrap; align-items: center; - gap: 8px; + gap: var(--sp-2); } .ext-sdk-test-runner-filter-label { font-size: 12px; @@ -113,10 +113,10 @@ .ext-sdk-test-runner-check input { cursor: pointer; } .ext-sdk-test-runner-btn-row { display: flex; - gap: 8px; + gap: var(--sp-2); } .ext-sdk-test-runner-btn { - padding: 6px 14px; + padding: var(--sp-2) var(--sp-4); border-radius: 6px; border: 1px solid var(--border, #444); background: var(--bg-raised, #2a2a2a); @@ -143,16 +143,16 @@ .ext-sdk-test-runner-summary { display: flex; flex-wrap: wrap; - gap: 8px; - margin-bottom: 12px; - padding: 10px 12px; + gap: var(--sp-2); + margin-bottom: var(--sp-3); + padding: var(--sp-3) var(--sp-3); background: var(--bg-raised, #1e1e1e); border-radius: 8px; border: 1px solid var(--border, #333); } .ext-sdk-test-runner-badge { display: inline-block; - padding: 3px 10px; + padding: var(--sp-1) var(--sp-3); border-radius: 4px; font-size: 12px; font-weight: 600; @@ -172,7 +172,7 @@ } .ext-sdk-test-runner-table th { text-align: left; - padding: 8px 10px; + padding: var(--sp-2) var(--sp-3); background: var(--bg-raised, #1e1e1e); color: var(--text-2, #aaa); font-weight: 600; @@ -185,7 +185,7 @@ z-index: 1; } .ext-sdk-test-runner-table td { - padding: 6px 10px; + padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-subtle, #2a2a2a); color: var(--text, #e0e0e0); vertical-align: top; diff --git a/packages/tasks/css/main.css b/packages/tasks/css/main.css index 048aee7..ccceca9 100644 --- a/packages/tasks/css/main.css +++ b/packages/tasks/css/main.css @@ -3,7 +3,7 @@ .ext-tasks-app { max-width: 1100px; margin: 0 auto; - padding: 24px 20px; + padding: var(--sp-6) var(--sp-5); height: 100%; display: flex; flex-direction: column; @@ -14,8 +14,8 @@ .ext-tasks-header { display: flex; align-items: center; - gap: 12px; - margin-bottom: 20px; + gap: var(--sp-3); + margin-bottom: var(--sp-5); flex-shrink: 0; } .ext-tasks-title { @@ -31,7 +31,7 @@ margin-left: auto; display: flex; align-items: center; - gap: 10px; + gap: var(--sp-3); } .ext-tasks-view-tabs { display: flex; @@ -41,7 +41,7 @@ padding: 2px; } .ext-tasks-view-tab { - padding: 5px 14px; + padding: 5px var(--sp-4); font-size: 13px; border: none; background: transparent; @@ -59,17 +59,17 @@ overflow-y: auto; display: flex; flex-direction: column; - gap: 6px; + gap: var(--sp-2); } .ext-tasks-list__filters { display: flex; align-items: center; - gap: 10px; - margin-bottom: 8px; + gap: var(--sp-3); + margin-bottom: var(--sp-2); flex-shrink: 0; } .ext-tasks-filter { - padding: 5px 10px; + padding: 5px var(--sp-3); font-size: 13px; background: var(--bg-raised); color: var(--text); @@ -83,7 +83,7 @@ .ext-tasks-list__loading, .ext-tasks-list__empty { display: flex; justify-content: center; - padding: 40px 0; + padding: var(--sp-10) 0; color: var(--text-3); font-size: 14px; } @@ -93,7 +93,7 @@ background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); - padding: 12px 14px; + padding: var(--sp-3) var(--sp-4); transition: var(--transition); } .ext-tasks-card:hover { @@ -103,7 +103,7 @@ .ext-tasks-card__header { display: flex; align-items: center; - gap: 8px; + gap: var(--sp-2); } .ext-tasks-card__priority { font-size: 10px; } .ext-tasks-card__title { @@ -116,7 +116,7 @@ .ext-tasks-card__title:hover { color: var(--accent); } .ext-tasks-card__status { font-size: 11px; - padding: 2px 8px; + padding: 2px var(--sp-2); border-radius: 10px; font-weight: 500; } @@ -128,7 +128,7 @@ .ext-tasks-card__desc { font-size: 13px; color: var(--text-2); - margin-top: 6px; + margin-top: var(--sp-2); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; @@ -137,15 +137,15 @@ .ext-tasks-card__footer { display: flex; align-items: center; - gap: 10px; - margin-top: 8px; + gap: var(--sp-3); + margin-top: var(--sp-2); font-size: 12px; color: var(--text-3); } .ext-tasks-card__actions { margin-left: auto; display: flex; - gap: 4px; + gap: var(--sp-1); opacity: 0; transition: var(--transition); } @@ -160,7 +160,7 @@ border-radius: var(--radius); transition: var(--transition); } -.ext-tasks-btn--sm { padding: 2px 8px; font-size: 13px; } +.ext-tasks-btn--sm { padding: 2px var(--sp-2); font-size: 13px; } .ext-tasks-btn:hover { background: var(--bg-hover); color: var(--text); } .ext-tasks-btn--danger:hover { background: var(--danger-dim); color: var(--danger); } @@ -169,7 +169,7 @@ flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); - gap: 12px; + gap: var(--sp-3); overflow-x: auto; overflow-y: hidden; } @@ -184,7 +184,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 10px 12px; + padding: var(--sp-3) var(--sp-3); font-size: 13px; font-weight: 600; color: var(--text-2); @@ -201,16 +201,16 @@ .ext-tasks-board__col-body { flex: 1; overflow-y: auto; - padding: 8px; + padding: var(--sp-2); display: flex; flex-direction: column; - gap: 6px; + gap: var(--sp-2); } .ext-tasks-board__card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); - padding: 10px 12px; + padding: var(--sp-3) var(--sp-3); cursor: pointer; transition: var(--transition); } @@ -223,23 +223,23 @@ color: var(--text); display: flex; align-items: center; - gap: 6px; + gap: var(--sp-2); } .ext-tasks-board__card-due { font-size: 11px; color: var(--text-3); - margin-top: 4px; + margin-top: var(--sp-1); } /* ── Form ────────────────────────────────── */ -.ext-tasks-form { display: flex; flex-direction: column; gap: 12px; } -.ext-tasks-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } -.ext-tasks-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } +.ext-tasks-form { display: flex; flex-direction: column; gap: var(--sp-3); } +.ext-tasks-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } +.ext-tasks-form__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-1); } .ext-tasks-form textarea, .ext-tasks-form input, .ext-tasks-form select { width: 100%; - padding: 7px 10px; + padding: 7px var(--sp-3); font-size: 13px; background: var(--input-bg); color: var(--text); @@ -258,23 +258,23 @@ .ext-tasks-status-widget { font-size: 12px; color: var(--text-3); - padding: 4px 10px; + padding: var(--sp-1) var(--sp-3); } /* ── Slot containers ─────────────────────── */ .sw-slot { display: flex; align-items: center; - gap: 8px; + gap: var(--sp-2); } .sw-slot--statusbar { - padding: 4px 12px; + padding: var(--sp-1) var(--sp-3); border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); flex-shrink: 0; } .sw-slot--toolbar { - padding: 4px 12px; + padding: var(--sp-1) var(--sp-3); flex-shrink: 0; } diff --git a/packages/team-activity-log/css/main.css b/packages/team-activity-log/css/main.css index 905a4eb..f6a1e81 100644 --- a/packages/team-activity-log/css/main.css +++ b/packages/team-activity-log/css/main.css @@ -5,10 +5,10 @@ .ext-team-activity-log-shell { max-width: 720px; margin: 0 auto; - padding: 24px 16px; + padding: var(--sp-6) var(--sp-4); display: flex; flex-direction: column; - gap: 16px; + gap: var(--sp-4); min-height: 100%; } @@ -18,13 +18,13 @@ display: flex; align-items: center; justify-content: space-between; - gap: 12px; + gap: var(--sp-3); } .ext-team-activity-log-header__left { display: flex; align-items: baseline; - gap: 10px; + gap: var(--sp-3); } .ext-team-activity-log-title { @@ -43,11 +43,11 @@ .ext-team-activity-log-form { display: flex; - gap: 8px; + gap: var(--sp-2); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); - padding: 10px 12px; + padding: var(--sp-3) var(--sp-3); } .ext-team-activity-log-form__select { @@ -57,7 +57,7 @@ color: var(--text); font-family: var(--font); font-size: 13px; - padding: 6px 8px; + padding: var(--sp-2) var(--sp-2); cursor: pointer; } @@ -69,7 +69,7 @@ color: var(--text); font-family: var(--font); font-size: 14px; - padding: 6px 10px; + padding: var(--sp-2) var(--sp-3); outline: none; transition: border-color var(--transition); } @@ -90,7 +90,7 @@ font-family: var(--font); font-size: 13px; font-weight: 500; - padding: 6px 16px; + padding: var(--sp-2) var(--sp-4); cursor: pointer; transition: background var(--transition); } @@ -109,7 +109,7 @@ .ext-team-activity-log-filters { display: flex; align-items: center; - gap: 6px; + gap: var(--sp-2); flex-wrap: wrap; } @@ -120,7 +120,7 @@ color: var(--text-2); font-family: var(--font); font-size: 12px; - padding: 4px 10px; + padding: var(--sp-1) var(--sp-3); cursor: pointer; transition: all var(--transition); } @@ -147,14 +147,14 @@ .ext-team-activity-log-entries { display: flex; flex-direction: column; - gap: 6px; + gap: var(--sp-2); } .ext-team-activity-log-entry { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); - padding: 10px 12px; + padding: var(--sp-3) var(--sp-3); transition: border-color var(--transition); } @@ -165,8 +165,8 @@ .ext-team-activity-log-entry__header { display: flex; align-items: center; - gap: 8px; - margin-bottom: 4px; + gap: var(--sp-2); + margin-bottom: var(--sp-1); } .ext-team-activity-log-entry__category { @@ -193,7 +193,7 @@ color: var(--text-3); font-size: 16px; cursor: pointer; - padding: 0 4px; + padding: 0 var(--sp-1); line-height: 1; opacity: 0; transition: all var(--transition); @@ -218,7 +218,7 @@ .ext-team-activity-log-empty, .ext-team-activity-log-loading { text-align: center; - padding: 40px 16px; + padding: var(--sp-10) var(--sp-4); color: var(--text-3); font-size: 14px; } diff --git a/packages/workflow-demo/css/main.css b/packages/workflow-demo/css/main.css index ce19e9a..a14e16e 100644 --- a/packages/workflow-demo/css/main.css +++ b/packages/workflow-demo/css/main.css @@ -7,7 +7,7 @@ .ext-workflow-demo { max-width: 1100px; margin: 0 auto; - padding: 0 1.5rem 2rem; + padding: 0 var(--sp-6) var(--sp-8); } /* Topbar */ @@ -15,9 +15,9 @@ display: flex; align-items: center; justify-content: space-between; - padding: 1rem 0; + padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); - margin-bottom: 1rem; + margin-bottom: var(--sp-4); } .ext-workflow-demo-topbar h1 { font-size: 1.5rem; @@ -29,7 +29,7 @@ /* Subtitle */ .ext-workflow-demo-subtitle { color: var(--text-2); - margin: 0 0 1.5rem; + margin: 0 0 var(--sp-6); font-size: 0.9rem; } @@ -37,7 +37,7 @@ .ext-workflow-demo-grid { display: grid; grid-template-columns: 1fr; - gap: 1.5rem; + gap: var(--sp-6); } @media (min-width: 768px) { .ext-workflow-demo-grid { @@ -50,10 +50,10 @@ background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); - padding: 1.25rem; + padding: var(--sp-5); display: flex; flex-direction: column; - gap: 0.75rem; + gap: var(--sp-3); color: var(--text); } @@ -61,7 +61,7 @@ .ext-workflow-demo-card-title-row { display: flex; align-items: center; - gap: 0.5rem; + gap: var(--sp-2); } .ext-workflow-demo-card-title-row h2 { font-size: 1.1rem; @@ -114,9 +114,9 @@ .ext-workflow-demo-stage-flow { display: flex; align-items: flex-start; - gap: 0.25rem; + gap: var(--sp-1); flex-wrap: wrap; - padding: 0.75rem; + padding: var(--sp-3); background: var(--bg-raised); border-radius: 6px; overflow-x: auto; @@ -172,7 +172,7 @@ font-size: 0.8rem; } .ext-workflow-demo-card-collapsible summary { - padding: 0.5rem 0.75rem; + padding: var(--sp-2) var(--sp-3); cursor: pointer; font-weight: 600; user-select: none; @@ -182,17 +182,17 @@ background: var(--bg-hover); } .ext-workflow-demo-collapsible-content { - padding: 0 0.75rem 0.75rem; + padding: 0 var(--sp-3) var(--sp-3); } .ext-workflow-demo-collapsible-content pre { background: var(--bg-raised); color: var(--text); - padding: 0.5rem; + padding: var(--sp-2); border-radius: 4px; overflow-x: auto; font-size: 0.72rem; line-height: 1.4; - margin: 0.25rem 0; + margin: var(--sp-1) 0; font-family: var(--mono); } @@ -200,9 +200,9 @@ .ext-workflow-demo-card-actions { display: flex; align-items: center; - gap: 0.5rem; + gap: var(--sp-2); margin-top: auto; - padding-top: 0.5rem; + padding-top: var(--sp-2); border-top: 1px solid var(--border); } .ext-workflow-demo-card .ext-workflow-demo-btn { @@ -219,13 +219,13 @@ .ext-workflow-demo-public-link-row { display: flex; align-items: center; - gap: 0.5rem; - margin-top: 0.25rem; + gap: var(--sp-2); + margin-top: var(--sp-1); } .ext-workflow-demo-public-link-row input { flex: 1; font-size: 0.7rem; - padding: 4px 8px; + padding: var(--sp-1) var(--sp-2); background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px; @@ -233,7 +233,7 @@ font-family: var(--mono); } .ext-workflow-demo-public-link-row .ext-workflow-demo-btn-copy { - padding: 4px 10px; + padding: var(--sp-1) var(--sp-3); font-size: 0.7rem; background: var(--bg-raised); border: 1px solid var(--border); diff --git a/src/css/layout.css b/src/css/layout.css index 8dad956..c3205db 100644 --- a/src/css/layout.css +++ b/src/css/layout.css @@ -70,14 +70,14 @@ .sidebar-top { display: flex; flex-direction: column; gap: 2px; - padding: 10px 10px 6px; + padding: var(--sp-3) var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--border); } /* Brand / collapse toggle */ .sb-brand { - display: flex; align-items: center; gap: 10px; - padding: 8px 10px; border-radius: var(--radius); + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: none; border: none; color: var(--text); cursor: pointer; font-size: 13px; white-space: nowrap; transition: background var(--transition); width: 100%; @@ -90,8 +90,8 @@ .brand-text { font-weight: 600; font-size: 14px; } .sb-btn { - display: flex; align-items: center; gap: 10px; - padding: 8px 10px; border-radius: var(--radius); + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 13px; white-space: nowrap; transition: background var(--transition), color var(--transition); @@ -106,19 +106,19 @@ .sidebar.collapsed .brand-text { opacity: 0; width: 0; } /* Collapsed centering */ -.sidebar.collapsed .sidebar-top { padding: 10px 0 8px; align-items: center; } -.sidebar.collapsed .sidebar-bottom { padding: 8px 0; display: flex; flex-direction: column; align-items: center; } -.sidebar.collapsed .sb-brand { justify-content: center; padding: 8px 0; gap: 0; } -.sidebar.collapsed .sb-btn { justify-content: center; padding: 8px 0; gap: 0; } -.sidebar.collapsed .split-btn-main { justify-content: center; padding: 8px 0; gap: 0; } -.sidebar.collapsed .user-btn { justify-content: center; padding: 6px 0; gap: 0; } +.sidebar.collapsed .sidebar-top { padding: var(--sp-3) 0 var(--sp-2); align-items: center; } +.sidebar.collapsed .sidebar-bottom { padding: var(--sp-2) 0; display: flex; flex-direction: column; align-items: center; } +.sidebar.collapsed .sb-brand { justify-content: center; padding: var(--sp-2) 0; gap: 0; } +.sidebar.collapsed .sb-btn { justify-content: center; padding: var(--sp-2) 0; gap: 0; } +.sidebar.collapsed .split-btn-main { justify-content: center; padding: var(--sp-2) 0; gap: 0; } +.sidebar.collapsed .user-btn { justify-content: center; padding: var(--sp-2) 0; gap: 0; } .sidebar.collapsed .avatar-bug { display: none; } /* Split button (New Chat + dropdown) */ .split-btn { display: flex; width: 100%; gap: 0; position: relative; } .split-btn-main { - flex: 1; display: flex; align-items: center; gap: 10px; - padding: 8px 10px; border-radius: var(--radius) 0 0 var(--radius); + flex: 1; display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-2) var(--sp-3); border-radius: var(--radius) 0 0 var(--radius); background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 13px; white-space: nowrap; transition: background var(--transition), color var(--transition); @@ -127,7 +127,7 @@ .split-btn-main svg { flex-shrink: 0; } .split-btn-drop { - display: flex; align-items: center; padding: 8px 6px; + display: flex; align-items: center; padding: var(--sp-2) 6px; border-radius: 0 var(--radius) var(--radius) 0; background: none; border: none; border-left: 1px solid var(--border); color: var(--text-3); cursor: pointer; @@ -141,13 +141,13 @@ display: none; position: absolute; left: 6px; right: 6px; top: 100%; z-index: 200; background: var(--bg-raised); border: 1px solid var(--border-light); - border-radius: var(--radius); padding: 4px; + border-radius: var(--radius); padding: var(--sp-1); box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .split-dropdown.open { display: block; } .split-dropdown-item { - display: flex; align-items: center; gap: 8px; - padding: 7px 10px; border-radius: 4px; width: 100%; + display: flex; align-items: center; gap: var(--sp-2); + padding: 7px var(--sp-3); border-radius: 4px; width: 100%; background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 12px; white-space: nowrap; transition: background var(--transition), color var(--transition); @@ -160,8 +160,8 @@ .user-btn { - display: flex; align-items: center; gap: 10px; - padding: 6px 8px; border-radius: var(--radius); + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-2) var(--sp-2); border-radius: var(--radius); background: none; border: none; color: var(--text); cursor: pointer; width: 100%; transition: background var(--transition); @@ -198,12 +198,12 @@ /* ── Sidebar Tabs (v0.21.6) ──────────── */ .sidebar-tabs { - display: flex; padding: 0 8px; gap: 0; + display: flex; padding: 0 var(--sp-2); gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sidebar-tab { - flex: 1; padding: 6px 0; font-size: 12px; font-weight: 500; + flex: 1; padding: var(--sp-2) 0; font-size: 12px; font-weight: 500; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-3); cursor: pointer; transition: color 0.15s, border-color 0.15s; @@ -219,7 +219,7 @@ .sidebar-search { display: flex; align-items: center; gap: 7px; - padding: 6px 10px; margin: 8px 10px 4px; + padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) var(--sp-3) var(--sp-1); background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition); } @@ -251,7 +251,7 @@ .mobile-menu-btn { display: none; align-items: center; justify-content: center; background: none; border: none; color: var(--text-2); - cursor: pointer; padding: 4px; border-radius: var(--radius); + cursor: pointer; padding: var(--sp-1); border-radius: var(--radius); transition: color var(--transition); } .mobile-menu-btn:hover { color: var(--text); } @@ -260,6 +260,11 @@ background: var(--overlay); } +@media (max-width: 1024px) { + .workspace-secondary.open { width: 360px; min-width: 360px; } + .admin-sidebar { width: 120px; } +} + @media (max-width: 768px) { .sidebar { position: fixed; z-index: 100; height: 100%; transition: width 0.2s ease; } .sidebar.collapsed { width: 0; border: none; overflow: hidden; } diff --git a/src/css/modals.css b/src/css/modals.css index 8550979..65e1df8 100644 --- a/src/css/modals.css +++ b/src/css/modals.css @@ -8,7 +8,7 @@ position: fixed; inset: 0; background: var(--overlay); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(2px); - padding: 2rem; /* keeps modal away from viewport edges at any zoom */ + padding: var(--sp-8); /* keeps modal away from viewport edges at any zoom */ } .modal-overlay.active { display: flex; } @@ -23,7 +23,7 @@ .modal-header { display: flex; align-items: center; justify-content: space-between; - padding: 16px 20px; border-bottom: 1px solid var(--border); + padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); } .modal-header h2 { font-size: 16px; font-weight: 600; } .modal-close { @@ -32,13 +32,13 @@ transition: color var(--transition); } .modal-close:hover { color: var(--text); } -.modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; } +.modal-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); } .modal-footer { - padding: 12px 20px; border-top: 1px solid var(--border); - display: flex; justify-content: flex-end; gap: 0.5rem; + padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); + display: flex; justify-content: flex-end; gap: var(--sp-2); } -.avatar-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; } +.avatar-upload-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .avatar-preview { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-raised); display: flex; align-items: center; justify-content: center; @@ -46,7 +46,7 @@ overflow: hidden; border: 2px solid var(--border); } .avatar-preview img { width: 100%; height: 100%; object-fit: cover; } -.avatar-actions { display: flex; flex-direction: column; gap: 4px; } +.avatar-actions { display: flex; flex-direction: column; gap: var(--sp-1); } .avatar-actions .form-hint { font-size: 11px; margin-left: 0; } .avatar-preview-sm { width: 42px; height: 42px; font-size: 18px; } @@ -56,7 +56,7 @@ border-bottom: 1px solid var(--border); background: var(--bg-raised); } .modal-tabs { - display: flex; padding: 0 16px; + display: flex; padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); background: var(--bg-raised); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; @@ -83,7 +83,7 @@ /* Settings tabs */ .settings-tabs { gap: 0; } .settings-tabs .settings-tab { - padding: 10px 14px; background: none; border: none; border-radius: 0; + padding: var(--sp-3) var(--sp-3); background: none; border: none; border-radius: 0; color: var(--text-3); cursor: pointer; font-size: 13px; font-family: var(--font); border-bottom: 2px solid transparent; transition: color var(--transition); outline: none; -webkit-appearance: none; appearance: none; @@ -94,19 +94,19 @@ .settings-notice { background: rgba(234,179,8,0.08); border: 1px solid var(--warning-dim); - border-radius: var(--radius); padding: 10px 14px; font-size: 13px; - color: var(--warning); display: flex; align-items: center; gap: 8px; + border-radius: var(--radius); padding: var(--sp-3) var(--sp-3); font-size: 13px; + color: var(--warning); display: flex; align-items: center; gap: var(--sp-2); margin-top: 1rem; } /* Providers */ .provider-row { display: flex; align-items: center; justify-content: space-between; - padding: 8px 0; border-bottom: 1px solid var(--border); + padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); } .provider-name { font-weight: 500; font-size: 13px; } -.provider-meta { font-size: 11px; color: var(--text-3); margin-left: 8px; } -.provider-actions { display: flex; align-items: center; gap: 8px; } +.provider-meta { font-size: 11px; color: var(--text-3); margin-left: var(--sp-2); } +.provider-actions { display: flex; align-items: center; gap: var(--sp-2); } /* Admin panel (fullscreen) */ .admin-panel { @@ -144,18 +144,18 @@ .admin-sidebar { width: 160px; flex-shrink: 0; border-right: 1px solid var(--border); - background: var(--bg-surface); padding: 0.75rem 0; overflow-y: auto; + background: var(--bg-surface); padding: var(--sp-3) 0; overflow-y: auto; } .admin-sidebar button { display: block; width: 100%; text-align: left; background: none; border: none; - padding: 8px 20px; color: var(--text-3); cursor: pointer; + padding: var(--sp-2) var(--sp-5); color: var(--text-3); cursor: pointer; font-size: 13px; font-family: var(--font); border-left: 3px solid transparent; transition: color 0.1s, background 0.1s; } .admin-sidebar button:hover { color: var(--text-2); background: var(--bg-raised); } .admin-sidebar button.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg-raised); } -.admin-main { flex: 1; overflow-y: auto; padding: 1.5rem 2rem; } +.admin-main { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--sp-8); } .admin-section-content { /* replaces .admin-tab-content */ } /* Admin shared */ @@ -169,14 +169,14 @@ .admin-tab:hover { color: var(--text-2); } .admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); } -.admin-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; } +.admin-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .admin-hint { font-size: 12px; color: var(--text-3); } .admin-inline-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); - padding: 1rem; margin-bottom: 1rem; + padding: var(--sp-4); margin-bottom: var(--sp-4); } .ext-edit-form { - background: var(--bg); padding: 12px 0; + background: var(--bg); padding: var(--sp-3) 0; } .ext-edit-form textarea { resize: vertical; min-height: 60px; @@ -197,7 +197,7 @@ .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; } -.admin-model-row { display: flex; align-items: center; gap: 12px; padding: 10px 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-caps-inline { display: flex; gap: 3px; } .admin-model-row .provider-meta { min-width: 80px; text-align: right; color: var(--text-3); font-size: 12px; } @@ -209,7 +209,7 @@ .model-list-item.model-hidden .model-name { text-decoration: line-through; } .admin-provider-row { - display: flex; align-items: center; gap: 12px; padding: 10px 0; + display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: 14px; } .admin-provider-row .provider-name { font-weight: 500; flex: 1; } @@ -219,7 +219,7 @@ .admin-provider-row .btn-delete { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; } .admin-provider-row .btn-delete:hover { color: var(--danger); } -.admin-persona-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; } +.admin-persona-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: 14px; } .admin-persona-row .persona-info { flex: 1; min-width: 0; } .persona-row-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; } .persona-row-icon { margin-right: 4px; } @@ -230,10 +230,10 @@ .admin-persona-row .btn-delete:hover { color: var(--danger); } /* Stats cards */ -.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } +.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); } .stat-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); - padding: 14px 16px; text-align: center; + padding: var(--sp-3) var(--sp-4); text-align: center; } .stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.2; } .stat-card .stat-label { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; } @@ -294,9 +294,9 @@ .team-tab-content { padding: 0; } /* Health + Routing admin (v0.22.3) */ -.admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } -.admin-health-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } -.list-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; } +.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); } +.list-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-3); margin-bottom: var(--sp-2); } .admin-user-row.user-inactive { opacity: 0.7; } @@ -321,8 +321,8 @@ } .cmd-input-wrap { - display: flex; align-items: center; gap: 10px; - padding: 12px 16px; border-bottom: 1px solid var(--border); + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .cmd-input-wrap svg { color: var(--text-3); flex-shrink: 0; } .cmd-input-wrap input { @@ -338,12 +338,12 @@ .cmd-results { max-height: 320px; overflow-y: auto; - padding: 4px; + padding: var(--sp-1); } .cmd-item { - display: flex; align-items: center; gap: 10px; - padding: 8px 12px; border-radius: var(--radius); + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); cursor: pointer; font-size: 13px; color: var(--text-2); transition: background 60ms ease, color 60ms ease; } @@ -359,12 +359,12 @@ .cmd-item.active .cmd-item-hint { color: var(--accent); } .cmd-group-label { font-size: 10px; font-weight: 600; color: var(--text-3); - padding: 8px 12px 4px; text-transform: uppercase; letter-spacing: 0.5px; + padding: var(--sp-2) var(--sp-3) var(--sp-1); text-transform: uppercase; letter-spacing: 0.5px; } .cmd-footer { - display: flex; align-items: center; gap: 16px; - padding: 8px 16px; border-top: 1px solid var(--border); + display: flex; align-items: center; gap: var(--sp-4); + padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border); font-size: 11px; color: var(--text-3); } .cmd-footer kbd { @@ -390,15 +390,15 @@ animation: confirm-in 0.15s ease; } .confirm-header { - padding: 16px 20px 0; font-weight: 600; font-size: 15px; color: var(--text); + padding: var(--sp-4) var(--sp-5) 0; font-weight: 600; font-size: 15px; color: var(--text); } .confirm-body { - padding: 12px 20px 20px; font-size: 13px; color: var(--text-2); + padding: var(--sp-3) var(--sp-5) var(--sp-5); font-size: 13px; color: var(--text-2); line-height: 1.5; white-space: pre-wrap; } .confirm-footer { - display: flex; justify-content: flex-end; gap: 8px; - padding: 0 20px 16px; + display: flex; justify-content: flex-end; gap: var(--sp-2); + padding: 0 var(--sp-5) var(--sp-4); } @keyframes confirm-in { from { opacity: 0; transform: scale(0.95); } } @keyframes fade-in { from { opacity: 0; } } @@ -406,7 +406,7 @@ /* ── Group Chat persona picker (v0.23.0) ────── */ .group-persona-item { display: flex; align-items: center; gap: 8px; - padding: 6px 10px; border-radius: var(--radius); + padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); cursor: pointer; font-size: 13px; transition: background 0.1s; } @@ -426,21 +426,21 @@ .sb-dialog { background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--radius-lg); - padding: 20px 22px 16px; + padding: var(--sp-5) var(--sp-5) var(--sp-4); min-width: 300px; max-width: 420px; width: 90vw; - display: flex; flex-direction: column; gap: 12px; + display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: 0 8px 32px rgba(0,0,0,0.5); animation: confirm-in 0.15s ease; } .sb-dialog-title { font-size: 14px; font-weight: 600; color: var(--text); } .sb-dialog-input { background: var(--bg-surface); border: 1px solid var(--border); - border-radius: var(--radius); padding: 8px 10px; + border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: 13px; color: var(--text); font-family: inherit; outline: none; width: 100%; box-sizing: border-box; } .sb-dialog-input:focus { border-color: var(--accent); } -.sb-dialog-color-row { display: flex; align-items: center; gap: 10px; } +.sb-dialog-color-row { display: flex; align-items: center; gap: var(--sp-3); } .sb-dialog-color-label { font-size: 12px; color: var(--text-2); } .sb-dialog-color-input { width: 32px; height: 26px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 1px; background: none; } -.sb-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; } +.sb-dialog-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); } diff --git a/src/css/primitives.css b/src/css/primitives.css index c8840f4..319f1f0 100644 --- a/src/css/primitives.css +++ b/src/css/primitives.css @@ -15,7 +15,7 @@ button { font-family: var(--font); cursor: pointer; } select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea { background: var(--bg-raised); border: 1px solid var(--border); - color: var(--text); padding: 8px 12px; border-radius: var(--radius); + color: var(--text); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); font-family: var(--font); font-size: 13px; transition: border-color var(--transition); } @@ -25,7 +25,7 @@ input[type="password"]:focus, textarea:focus { } select option { background: var(--bg-surface); color: var(--text); } -.form-row { display: flex; gap: 0.75rem; } +.form-row { display: flex; gap: var(--sp-3); } .form-row .form-group { flex: 1; } .form-hint { font-weight: 400; color: var(--text-3); margin-left: 4px; } .range-input { @@ -57,7 +57,7 @@ select option { background: var(--bg-surface); color: var(--text); } } .mode-selector { - display: flex; gap: 2px; padding: 6px 8px; + display: flex; gap: 2px; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border); flex-shrink: 0; } @@ -81,16 +81,16 @@ select option { background: var(--bg-surface); color: var(--text); } /* ── REPL Console (v0.21.3) ────────────── */ .repl-toolbar { - display: flex; gap: 0.5rem; padding: 6px 12px; + display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); font-size: 11px; } .repl-output { - flex: 1; overflow-y: auto; padding: 6px; + flex: 1; overflow-y: auto; padding: var(--sp-2); font-family: var(--mono); font-size: 12px; line-height: 1.6; } .repl-input-wrap { display: flex; align-items: flex-start; gap: 6px; - padding: 8px 12px; border-top: 1px solid var(--border); + padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); background: var(--bg-raised); } .repl-prompt { @@ -149,7 +149,7 @@ select option { background: var(--bg-surface); color: var(--text); } .popup { display: none; position: absolute; background: var(--bg-raised); border: 1px solid var(--border-light); - border-radius: var(--radius-lg); padding: 4px; + border-radius: var(--radius-lg); padding: var(--sp-1); box-shadow: var(--shadow-lg); z-index: 300; } .popup.open { display: block; } @@ -163,8 +163,8 @@ select option { background: var(--bg-surface); color: var(--text); } } .tools-popup { bottom: 100%; left: 0; margin-bottom: 8px; min-width: 210px; } .tools-popup-category, .tools-popup-tool { - display: flex; align-items: center; gap: 10px; - padding: 8px 12px; border-radius: var(--radius); + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); cursor: pointer; font-size: 13px; color: var(--text-2); transition: background var(--transition); } @@ -215,12 +215,12 @@ select option { background: var(--bg-surface); color: var(--text); } min-width: 240px; max-height: 300px; overflow-y: auto; } .kb-popup-header { - padding: 8px 12px 4px; font-size: 12px; font-weight: 600; + padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; } .kb-popup-item { - display: flex; align-items: center; gap: 8px; - padding: 6px 12px; cursor: pointer; + display: flex; align-items: center; gap: var(--sp-2); + padding: var(--sp-2) var(--sp-3); cursor: pointer; transition: background var(--transition); } .kb-popup-item:hover { background: var(--bg-hover); } @@ -273,7 +273,7 @@ select option { background: var(--bg-surface); color: var(--text); } /* ── Shared Form Controls ────────────────── */ -.form-group { margin-bottom: 14px; } +.form-group { margin-bottom: var(--sp-3); } .form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; @@ -336,7 +336,7 @@ select option { background: var(--bg-surface); color: var(--text); } /* ── Icon Button ─────────────────────────── */ .icon-btn { background: none; border: none; color: var(--text-3); - cursor: pointer; padding: 5px; border-radius: 7px; + cursor: pointer; padding: var(--sp-1); border-radius: 7px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } @@ -345,9 +345,9 @@ select option { background: var(--bg-surface); color: var(--text); } .icon-btn-danger:hover { color: var(--danger); } /* ── Utility States ─────────────────────── */ -.loading { color: var(--text-3); font-size: 13px; padding: 0.5rem; } -.error-hint { color: var(--danger); font-size: 13px; padding: 0.5rem; } -.empty-hint { color: var(--text-3); font-size: 13px; text-align: center; padding: 1rem; } +.loading { color: var(--text-3); font-size: 13px; padding: var(--sp-2); } +.error-hint { color: var(--danger); font-size: 13px; padding: var(--sp-2); } +.empty-hint { color: var(--text-3); font-size: 13px; text-align: center; padding: var(--sp-4); } /* ── SDK Primitives (sw.menu, sw.dropdown, sw.toolbar, sw.tabs) ── */ @@ -366,8 +366,8 @@ select option { background: var(--bg-surface); color: var(--text); } .sw-menu-flyout[data-fixed] { position: fixed; } /* Flyout items — single source of truth for all flyout menus (sw.menu + UserMenu) */ .sw-menu-flyout .flyout-item { - display: flex; align-items: center; gap: 10px; - padding: 8px 12px; border-radius: var(--radius, 6px); + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-2) var(--sp-3); border-radius: var(--radius, 6px); background: none; border: none; color: var(--text, #e8e8ed); cursor: pointer; font-size: 13px; font-family: inherit; width: 100%; transition: background 0.15s, color 0.15s; @@ -381,15 +381,15 @@ select option { background: var(--bg-surface); color: var(--text); } background: var(--danger-dim, rgba(244,67,54,0.1)); color: var(--danger, #f44336); } .sw-menu-flyout .flyout-divider { - border: none; height: 1px; background: var(--border, #2a2a2e); margin: 4px 0; + border: none; height: 1px; background: var(--border, #2a2a2e); margin: var(--sp-1) 0; } /* Dropdown — see sw-primitives.css (.sw-dropdown) */ /* Toolbar — horizontal button row */ .sw-toolbar { - display: flex; align-items: center; gap: 4px; - padding: 4px 0; + display: flex; align-items: center; gap: var(--sp-1); + padding: var(--sp-1) 0; } /* Tabs — see sw-primitives.css (.sw-tabs) */ @@ -399,7 +399,7 @@ select option { background: var(--bg-surface); color: var(--text); } @media (max-width: 768px) { /* Flyout items: larger touch targets */ .sw-menu-flyout .flyout-item { - padding: 10px 12px; + padding: var(--sp-3) var(--sp-3); min-height: 44px; } @@ -430,7 +430,7 @@ select option { background: var(--bg-surface); color: var(--text); } .sw-user-picker__input { width: 100%; - padding: 8px 10px; + padding: var(--sp-2) var(--sp-3); border-radius: var(--radius, 6px); border: 1px solid var(--border, #2a2a2e); background: var(--bg, #0e0e10); @@ -476,8 +476,8 @@ select option { background: var(--bg-surface); color: var(--text); } .sw-user-picker__option { display: flex; align-items: center; - gap: 8px; - padding: 8px 10px; + gap: var(--sp-2); + padding: var(--sp-2) var(--sp-3); cursor: pointer; transition: background 0.1s; } diff --git a/src/css/surfaces.css b/src/css/surfaces.css index ef66945..a791137 100644 --- a/src/css/surfaces.css +++ b/src/css/surfaces.css @@ -6,13 +6,13 @@ .admin-storage-card { background: var(--bg-raised); border: 1px solid var(--border); - border-radius: var(--radius); padding: 16px; margin-bottom: 12px; + border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-3); } -.admin-storage-card h4 { margin: 0 0 10px 0; font-size: 14px; } -.admin-storage-desc { font-size: 12px; color: var(--text-3); margin: 0 0 10px 0; } +.admin-storage-card h4 { margin: 0 0 var(--sp-3) 0; font-size: 14px; } +.admin-storage-desc { font-size: 12px; color: var(--text-3); margin: 0 0 var(--sp-3) 0; } .admin-storage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); - gap: 10px; + gap: var(--sp-3); } .admin-storage-item { display: flex; flex-direction: column; gap: 2px; } .admin-storage-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; } @@ -31,8 +31,8 @@ display: flex; height: 100%; overflow: hidden; } .settings-topbar { - display: flex; align-items: center; gap: 12px; - padding: 10px 20px; border-bottom: 1px solid var(--border); + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); background: var(--bg-surface); flex-shrink: 0; } .settings-topbar-back { @@ -48,12 +48,12 @@ width: 220px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--bg-surface); - padding: 12px 8px; overflow-y: auto; + padding: var(--sp-3) var(--sp-2); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .settings-nav-link { - display: flex; align-items: center; gap: 8px; - padding: 8px 12px; border-radius: 8px; + display: flex; align-items: center; gap: var(--sp-2); + padding: var(--sp-2) var(--sp-3); border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.12s; border: none; background: none; cursor: pointer; @@ -61,28 +61,28 @@ } .settings-nav-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; } .settings-nav-link.active { background: var(--accent-dim); color: var(--accent); } -.settings-nav-sep { margin: 8px 0; border-top: 1px solid var(--border); } -.settings-content { flex: 1; overflow-y: auto; padding: 28px; } -.settings-content h2 { font-size: 18px; font-weight: 600; margin: 0 0 20px; } +.settings-nav-sep { margin: var(--sp-2) 0; border-top: 1px solid var(--border); } +.settings-content { flex: 1; overflow-y: auto; padding: var(--sp-8); } +.settings-content h2 { font-size: 18px; font-weight: 600; margin: 0 0 var(--sp-5); } .settings-content .settings-section { background: none; border: none; border-radius: 0; - padding: 0 0 16px; margin-bottom: 20px; max-width: 560px; + padding: 0 0 var(--sp-4); margin-bottom: var(--sp-5); max-width: 560px; } .settings-content .settings-section h3 { - font-size: 14px; font-weight: 600; margin: 0 0 14px; - padding-bottom: 8px; border-bottom: 1px solid var(--border); + font-size: 14px; font-weight: 600; margin: 0 0 var(--sp-3); + padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); } .settings-section { - margin-bottom: 24px; padding: 20px; + margin-bottom: var(--sp-6); padding: var(--sp-5); background: var(--bg-surface); border-radius: 10px; border: 1px solid var(--border); } .settings-section h3 { - font-size: 15px; font-weight: 600; margin: 0 0 16px; - padding-bottom: 10px; border-bottom: 1px solid var(--border); + font-size: 15px; font-weight: 600; margin: 0 0 var(--sp-4); + padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); } .settings-placeholder { - padding: 40px 20px; color: var(--text-3); + padding: var(--sp-10) var(--sp-5); color: var(--text-3); text-align: center; font-size: 13px; } @@ -92,8 +92,8 @@ display: flex; flex-direction: column; height: 100%; overflow: hidden; } .admin-topbar { - display: flex; align-items: center; gap: 12px; - padding: 10px 20px; border-bottom: 1px solid var(--border); + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); background: var(--bg-surface); flex-shrink: 0; } .admin-topbar-back { @@ -123,10 +123,10 @@ .admin-nav { width: 200px; background: var(--bg-surface); border-right: 1px solid var(--border); - padding: 12px 8px; 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 { - display: flex; padding: 8px 12px; border-radius: 8px; + display: flex; padding: var(--sp-2) var(--sp-3); border-radius: 8px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; width: 100%; text-align: left; transition: all 0.12s; @@ -137,30 +137,30 @@ .admin-nav-link.active { background: var(--accent-dim); color: var(--accent); } .admin-content { flex: 1; display: flex; flex-direction: column; min-width: 0; } .admin-content-header { - display: flex; align-items: center; gap: 12px; - padding: 14px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border); flex-shrink: 0; } .admin-content-header h2 { font-size: 16px; font-weight: 600; margin: 0; } .admin-search { display: flex; align-items: center; gap: 7px; background: var(--input-bg, var(--bg)); border-radius: 8px; - padding: 6px 10px; border: 1px solid var(--border); width: 220px; + padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); width: 220px; } .admin-search input { background: none; border: none; color: var(--text); font-size: 12px; font-family: inherit; flex: 1; outline: none; } -.admin-content-body { flex: 1; overflow-y: auto; padding: 24px; } +.admin-content-body { flex: 1; overflow-y: auto; padding: var(--sp-6); } /* ── Data Tables ─────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; } .data-table th { - padding: 10px 14px; text-align: left; font-weight: 600; + padding: var(--sp-3) var(--sp-3); text-align: left; font-weight: 600; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } .data-table td { - padding: 10px 14px; font-size: 13px; + padding: var(--sp-3) var(--sp-3); font-size: 13px; border-bottom: 1px solid var(--border); } .data-table tr:hover td { background: var(--bg-hover); } @@ -171,8 +171,8 @@ display: flex; flex-direction: column; height: 100%; overflow: hidden; } .editor-topbar { - display: flex; align-items: center; gap: 8px; - padding: 6px 12px; border-bottom: 1px solid var(--border); + display: flex; align-items: center; gap: var(--sp-2); + padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); background: var(--bg-surface); flex-shrink: 0; } .editor-topbar-back { @@ -189,10 +189,10 @@ display: flex; flex-direction: column; flex-shrink: 0; } .editor-tree-header { - padding: 8px 10px; border-bottom: 1px solid var(--border); + padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; } -.editor-tree-files { flex: 1; overflow-y: auto; padding: 4px 0; } +.editor-tree-files { flex: 1; overflow-y: auto; padding: var(--sp-1) 0; } .editor-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .editor-tabs { display: flex; align-items: center; @@ -201,7 +201,7 @@ } .editor-tab { display: flex; align-items: center; gap: 6px; - padding: 6px 12px; cursor: pointer; font-size: 12px; + padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: 12px; white-space: nowrap; border-right: 1px solid var(--border); background: transparent; color: var(--text-3); border-bottom: 2px solid transparent; @@ -214,23 +214,23 @@ } .editor-content { flex: 1; overflow: auto; } .editor-statusbar { - display: flex; align-items: center; gap: 14px; - padding: 3px 12px; background: var(--bg-surface); + display: flex; align-items: center; gap: var(--sp-3); + padding: 3px var(--sp-3); background: var(--bg-surface); border-top: 1px solid var(--border); flex-shrink: 0; font-size: 11px; color: var(--text-3); font-family: var(--mono); } /* ── Stat Cards Grid ──────────────────────── */ -.stat-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; } +.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 { - background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; + background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-4); } -.stat-card-label { font-size: 11px; color: var(--text-3); font-weight: 500; margin-bottom: 6px; 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-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; } /* ── Bar Chart ───────────────────────────── */ -.bar-chart { display: flex; align-items: flex-end; gap: 8px; 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-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; } @@ -291,22 +291,28 @@ .admin-actions-cell { white-space: nowrap; text-align: right; } /* ── Provider Cards ──────────────────────── */ -.provider-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } +.provider-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); } .provider-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; - padding: 16px; 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-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } +.provider-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-3); } .provider-card-name { font-weight: 600; font-size: 14px; } .provider-card-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; } -@media (max-width: 768px) { - .settings-nav { width: 160px; font-size: 12px; padding: 12px 8px; } - .settings-content { padding: 16px; } +@media (max-width: 1024px) { + .settings-nav { width: 180px; } .admin-nav { width: 160px; } - .admin-content-body { padding: 16px; } + .editor-tree { width: 180px; } +} + +@media (max-width: 768px) { + .settings-nav { width: 160px; font-size: 12px; padding: var(--sp-3) var(--sp-2); } + .settings-content { padding: var(--sp-4); } + .admin-nav { width: 160px; } + .admin-content-body { padding: var(--sp-4); } .editor-tree { width: 180px; } } diff --git a/src/css/sw-login.css b/src/css/sw-login.css index 6e6328e..49dae3c 100644 --- a/src/css/sw-login.css +++ b/src/css/sw-login.css @@ -66,7 +66,7 @@ /* ── Auth Panel (right) ────────────────────── */ .login-auth-panel { width: 440px; flex-shrink: 0; display: flex; align-items: center; - justify-content: center; padding: 2rem; background: var(--bg-surface); + justify-content: center; padding: var(--sp-8); background: var(--bg-surface); border-left: 1px solid var(--border); overflow-y: auto; } .login-auth-inner { width: 100%; max-width: 340px; } @@ -84,7 +84,7 @@ .login-auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .login-auth-tab:hover { color: var(--text-2); } -.login-form-field { margin-bottom: 16px; } +.login-form-field { margin-bottom: var(--sp-4); } .login-form-field label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; @@ -92,7 +92,7 @@ .login-form-field input { width: 100%; box-sizing: border-box; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); - padding: 10px 14px; border-radius: 10px; font-size: 14px; font-family: var(--font); + padding: var(--sp-3) var(--sp-3); border-radius: 10px; font-size: 14px; font-family: var(--font); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .login-form-field input:focus { @@ -113,7 +113,7 @@ .login-btn { width: 100%; background: var(--accent); color: #fff; border: none; - padding: 10px 18px; font-size: 14px; border-radius: 10px; cursor: pointer; + padding: var(--sp-3) var(--sp-5); font-size: 14px; border-radius: 10px; cursor: pointer; font-family: var(--font); font-weight: 600; letter-spacing: -0.01em; transition: all 0.18s; margin-top: 1.5rem; } @@ -158,7 +158,7 @@ .login-anim-a3 { animation-delay: .29s; } /* ── Responsive ─────────────────────────────── */ -@media (max-width: 900px) { +@media (max-width: 1024px) { .login-hero { display: none; } .login-auth-panel { width: 100%; border-left: none; } } diff --git a/src/css/sw-primitives.css b/src/css/sw-primitives.css index 50b94ee..fee31f7 100644 --- a/src/css/sw-primitives.css +++ b/src/css/sw-primitives.css @@ -13,9 +13,9 @@ white-space: nowrap; position: relative; } .sw-btn:disabled { opacity: 0.5; cursor: not-allowed; } -.sw-btn--sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; } -.sw-btn--md { padding: 0.45rem 0.9rem; font-size: 0.875rem; } -.sw-btn--lg { padding: 0.6rem 1.2rem; font-size: 1rem; } +.sw-btn--sm { padding: var(--sp-1) var(--sp-2); font-size: 0.8rem; } +.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--primary { background: var(--accent); color: var(--text-on-color); } .sw-btn--primary:hover:not(:disabled) { background: var(--accent-hover); } @@ -62,7 +62,7 @@ /* ── FormField ─────────────────────────────── */ -.sw-field { display: flex; flex-direction: column; gap: 0.3rem; } +.sw-field { display: flex; flex-direction: column; gap: var(--sp-1); } .sw-field__label { font-size: 0.8rem; font-weight: 500; color: var(--text-2); } .sw-field__required { color: var(--danger); margin-left: 2px; } .sw-field__error { font-size: 0.75rem; color: var(--danger); } @@ -72,7 +72,7 @@ /* ── Shared input ──────────────────────────── */ .sw-input { - width: 100%; padding: 0.45rem 0.7rem; background: var(--input-bg); + width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: 0.875rem; outline: none; transition: border-color var(--transition); @@ -84,7 +84,7 @@ .sw-tooltip-wrap { position: relative; display: inline-flex; } .sw-tooltip { - position: absolute; z-index: 1000; padding: 0.3rem 0.6rem; + position: absolute; z-index: 1000; padding: var(--sp-1) var(--sp-2); background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.75rem; white-space: nowrap; pointer-events: none; animation: sw-fade-in 0.15s ease; @@ -100,7 +100,7 @@ .sw-banner { display: flex; align-items: center; justify-content: center; - gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 500; + gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: 0.85rem; font-weight: 500; width: 100%; flex-shrink: 0; } .sw-banner--info { background: var(--accent-dim); color: var(--accent-light); } @@ -116,13 +116,13 @@ /* ── Toast ─────────────────────────────────── */ .sw-toast-container { - position: fixed; bottom: 1rem; right: 1rem; z-index: 10000; - display: flex; flex-direction: column-reverse; gap: 0.5rem; + position: fixed; bottom: var(--sp-4); right: var(--sp-4); z-index: 10000; + display: flex; flex-direction: column-reverse; gap: var(--sp-2); max-width: 380px; pointer-events: none; } .sw-toast { - display: flex; align-items: center; gap: 0.75rem; - padding: 0.75rem 1rem; border-radius: var(--radius-lg); + display: flex; align-items: center; gap: var(--sp-3); + padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); background: var(--bg-raised); border: 1px solid var(--border); box-shadow: var(--shadow-lg); pointer-events: auto; font-size: 0.875rem; @@ -158,7 +158,7 @@ } .sw-dialog__header { display: flex; align-items: center; justify-content: space-between; - padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border); + padding: var(--sp-4) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--border); } .sw-dialog__title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; } .sw-dialog__close { @@ -166,10 +166,10 @@ font-size: 1.3rem; padding: 0; line-height: 1; } .sw-dialog__close:hover { color: var(--text); } -.sw-dialog__body { padding: 1rem 1.25rem; overflow-y: auto; color: var(--text); font-size: 0.9rem; line-height: 1.5; } +.sw-dialog__body { padding: var(--sp-4) var(--sp-5); overflow-y: auto; color: var(--text); font-size: 0.9rem; line-height: 1.5; } .sw-dialog__actions { - display: flex; gap: 0.5rem; justify-content: flex-end; - padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); + display: flex; gap: var(--sp-2); justify-content: flex-end; + padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); } @keyframes sw-scale-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } @@ -180,11 +180,11 @@ z-index: 6000; min-width: 160px; max-width: 300px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); - padding: 4px 0; outline: none; animation: sw-fade-in 0.1s ease; + padding: var(--sp-1) 0; outline: none; animation: sw-fade-in 0.1s ease; } .sw-menu__item { - display: flex; align-items: center; gap: 0.5rem; - padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.85rem; + display: flex; align-items: center; gap: var(--sp-2); + padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: 0.85rem; color: var(--text); transition: background var(--transition); } .sw-menu__item:hover, .sw-menu__item--focused { background: var(--bg-hover); } @@ -193,11 +193,11 @@ .sw-menu__icon { flex-shrink: 0; width: 1.1em; text-align: center; color: var(--text-2); } .sw-menu__label { flex: 1; } .sw-menu__arrow { font-size: 0.6em; color: var(--text-3); } -.sw-menu__divider { height: 1px; background: var(--border); margin: 4px 0; } +.sw-menu__divider { height: 1px; background: var(--border); margin: var(--sp-1) 0; } @media (max-width: 768px) { .sw-menu { max-width: calc(100vw - 16px); } - .sw-menu__item { min-height: 44px; padding: 0.5rem 0.75rem; } + .sw-menu__item { min-height: 44px; padding: var(--sp-2) var(--sp-3); } } /* ── Drawer ────────────────────────────────── */ @@ -221,7 +221,7 @@ .sw-drawer--left.sw-drawer--open { transform: translateX(0); } .sw-drawer__header { display: flex; align-items: center; justify-content: space-between; - padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; + padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); flex-shrink: 0; } .sw-drawer__title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; } .sw-drawer__close { @@ -229,7 +229,7 @@ font-size: 1.3rem; padding: 0; line-height: 1; } .sw-drawer__close:hover { color: var(--text); } -.sw-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; } +.sw-drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); } /* ── Tabs ──────────────────────────────────── */ @@ -243,7 +243,7 @@ } .sw-tabs__scroll::-webkit-scrollbar { display: none; } .sw-tabs__tab { - padding: 0.5rem 0.9rem; background: none; border: none; + padding: var(--sp-2) var(--sp-3); background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-2); font-family: var(--font); font-size: 0.85rem; font-weight: 500; cursor: pointer; white-space: nowrap; @@ -264,7 +264,7 @@ .sw-dropdown { position: relative; display: inline-block; } .sw-dropdown__trigger { display: flex; align-items: center; justify-content: space-between; - gap: 0.5rem; width: 100%; padding: 0.45rem 0.7rem; + gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: 0.875rem; cursor: pointer; @@ -280,13 +280,13 @@ border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: sw-fade-in 0.1s ease; } -.sw-dropdown__search { margin: 4px; width: calc(100% - 8px); } +.sw-dropdown__search { margin: var(--sp-1); width: calc(100% - var(--sp-2)); } .sw-dropdown__option { - padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.85rem; + padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: 0.85rem; color: var(--text); transition: background var(--transition); } .sw-dropdown__option:hover, .sw-dropdown__option--focused { background: var(--bg-hover); } .sw-dropdown__option--selected { color: var(--accent); font-weight: 500; } .sw-dropdown__option--disabled { opacity: 0.4; cursor: not-allowed; } .sw-dropdown__option--disabled:hover { background: transparent; } -.sw-dropdown__empty { padding: 0.75rem; text-align: center; color: var(--text-3); font-size: 0.85rem; } +.sw-dropdown__empty { padding: var(--sp-3); text-align: center; color: var(--text-3); font-size: 0.85rem; } diff --git a/src/css/sw-shell.css b/src/css/sw-shell.css index 776ff5e..7c267c4 100644 --- a/src/css/sw-shell.css +++ b/src/css/sw-shell.css @@ -24,8 +24,8 @@ display: flex; align-items: center; justify-content: center; - gap: 0.5rem; - padding: 0.45rem 1rem; + gap: var(--sp-2); + padding: var(--sp-2) var(--sp-4); font-size: 0.8rem; font-weight: 500; } @@ -75,8 +75,8 @@ .sw-shell__announcement-inner { display: flex; align-items: center; - gap: 0.75rem; - padding: 0.6rem 1.25rem; + gap: var(--sp-3); + padding: var(--sp-2) var(--sp-5); font-size: 0.85rem; } @@ -101,7 +101,7 @@ .sw-shell__footer { flex-shrink: 0; - padding: 0.5rem 1rem; + padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-3); @@ -125,11 +125,11 @@ display: flex; align-items: center; height: 44px; - padding: 0 12px; + padding: 0 var(--sp-3); background: var(--bg-surface); border-bottom: 1px solid var(--border); flex-shrink: 0; - gap: 10px; + gap: var(--sp-3); } .sw-topbar__title { @@ -147,13 +147,13 @@ .sw-topbar__slot { display: flex; align-items: center; - gap: 8px; + gap: var(--sp-2); } .sw-topbar__right { display: flex; align-items: center; - gap: 8px; + gap: var(--sp-2); } /* ── User menu trigger ───────────────────── */ @@ -241,7 +241,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 10px 14px; + padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border, #2a2a2e); font-size: 13px; font-weight: 600; @@ -268,14 +268,14 @@ } .sw-notification-bell__empty { - padding: 24px 14px; + padding: var(--sp-6) var(--sp-3); text-align: center; color: var(--text-3, #555); font-size: 12px; } .sw-notification-bell__item { - padding: 10px 14px; + padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border, #2a2a2e); cursor: pointer; transition: background 0.15s; diff --git a/src/css/user-menu.css b/src/css/user-menu.css index d23570c..3d21459 100644 --- a/src/css/user-menu.css +++ b/src/css/user-menu.css @@ -19,8 +19,8 @@ .user-menu-wrap .user-btn { display: flex; align-items: center; - gap: 8px; - padding: 6px 8px; + gap: var(--sp-2); + padding: var(--sp-2) var(--sp-2); border-radius: var(--radius, 6px); background: none; border: none; @@ -78,7 +78,7 @@ /* Sidebar collapsed: hide label, center avatar */ .sidebar.collapsed .user-menu-wrap .user-btn { justify-content: center; - padding: 6px 0; + padding: var(--sp-2) 0; gap: 0; } @@ -101,7 +101,7 @@ @media (max-width: 768px) { /* User menu button: ensure 44px touch target */ .user-menu-wrap .user-btn { - padding: 8px; + padding: var(--sp-2); min-height: 44px; } diff --git a/src/css/variables.css b/src/css/variables.css index d6e6049..a966c11 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -67,6 +67,23 @@ --mono: 'JetBrains Mono', 'Söhne Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; --transition: 180ms ease; + /* -- Spacing (4px grid) ------------------- */ + --sp-1: 0.25rem; /* 4px */ + --sp-2: 0.5rem; /* 8px */ + --sp-3: 0.75rem; /* 12px */ + --sp-4: 1rem; /* 16px */ + --sp-5: 1.25rem; /* 20px */ + --sp-6: 1.5rem; /* 24px */ + --sp-8: 2rem; /* 32px */ + --sp-10: 2.5rem; /* 40px */ + --sp-12: 3rem; /* 48px */ + + /* -- Breakpoints -------------------------- + Mobile: max-width: 768px + Tablet: max-width: 1024px + Desktop: default (no query) + ----------------------------------------- */ + /* Banner system — set by JS from /api/v1/admin/settings/banner */ --banner-top-height: 0px; --banner-bottom-height: 0px;