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

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