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

Feat v0.6.13 responsive spacing
Some checks failed
CI/CD / detect-changes (pull_request) Successful in 4s
Details
CI/CD / test-frontend (pull_request) Successful in 6s
Details
CI/CD / build-and-deploy (pull_request) Has been cancelled
Details
CI/CD / test-sqlite (pull_request) Has been cancelled
Details
CI/CD / test-go-pg (pull_request) Has been cancelled
Details

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Jeffrey Smith
2026-04-01 12:24:28 +00:00
parent 221ae94f4f
commit ffa7e85551
25 changed files with 625 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}

36
packages/dashboard/css/main.css
View File

@@ -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);
}

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

@@ -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 {

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

@@ -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;
}

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

@@ -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; }

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

@@ -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; }

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

@@ -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); }
}

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

@@ -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;

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

@@ -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;
}

34
packages/team-activity-log/css/main.css
View File

@@ -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;
}

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

@@ -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);