conductor/conductor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace hardcoded margin and gap values with design tokens

Browse Source 
Gap replacements across all Svelte components:
- 0.15rem, 0.25rem, 0.35rem, 0.4rem → var(--space-xs)
- 0.5rem → var(--space-sm)
- 0.75rem → var(--space-md)
- 1rem, 1.25rem → var(--space-lg)

Margin replacements across all Svelte components:
- 0.25rem → var(--space-xs)
- 0.5rem → var(--space-sm)
- 0.75rem → var(--space-md)
- 1rem, 1.25rem → var(--space-lg)
- 1.5rem → var(--space-xl)
- 2rem → var(--space-2xl)
- margin-bottom and margin-top variants also tokenized

Border-radius values left as raw rem — Design Constitution itself uses raw rem for radius values (no --radius-* tokens defined).
This commit is contained in:
Nick
2026-06-23 17:38:40 +01:00
parent 0235844135
commit 182b0a5e1f
24 changed files with 57 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app-base/SettingsView.svelte
+2 -2
View File
@@ -406,13 +406,13 @@ export CONDUCTOR_YOUTUBE_CLIENT_SECRET="YOUR_SECRET"</pre>
</div>
</div>
<style>
.update-status{display:flex;align-items:center;gap:.75rem;margin:1rem 0}
.update-status{display:flex;align-items:center;gap: var(--space-md, 0.75rem);margin: var(--space-lg, 1rem) 0}
.status-indicator{width:10px;height:10px;border-radius:50%;background:var(--text-dim,#8b949e)}
.status-indicator.connected{background:var(--success,#3fb950)}
.action-button{background:var(--surface,#161b22);border:1px solid var(--border,#30363d);color:var(--text,#c9d1d9);padding:.5rem 1rem;border-radius:6px;cursor:pointer}
.action-button:disabled{opacity:.5;cursor:not-allowed}
.toggle-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--border,#30363d)}
.toggle-label{display:flex;flex-direction:column;gap:.15rem}
.toggle-label{display:flex;flex-direction:column;gap: var(--space-xs, 0.15rem)}
.toggle-hint{font-size:.8rem;color:var(--text-dim,#8b949e)}
input[role="switch"]{width:2.5rem;height:1.4rem;accent-color:var(--accent,#58a6ff);cursor:pointer}
.settings-header{display:flex;align-items:center;gap:.5rem;padding:.75rem .5rem .25rem;color:var(--text-dim,#8b949e)}
frontend/src/lib/components/AnalyticsDashboard.svelte
+3 -3
View File
@@ -44,7 +44,7 @@
.analytics-dashboard {
display: flex;
flex-direction: column;
gap: 1.25rem;
gap: var(--space-lg, 1.25rem);
}
.analytics-header {
display: flex;
@@ -62,7 +62,7 @@
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
gap: var(--space-lg, 1rem);
}
.metric-card {
padding: var(--space-lg, 1rem);
@@ -71,7 +71,7 @@
background: rgb(255 255 255 / 4%);
}
.metric-label { display: block; color: var(--color-text-dim, #7a8da6); font-size: var(--font-size-sm, 0.8rem); text-transform: uppercase; letter-spacing: 0.05em; }
.metric-value { display: block; color: var(--color-text-primary, #e8edff); font-size: var(--font-size-xl, 1.5rem); font-weight: 700; margin: 0.25rem 0; }
.metric-value { display: block; color: var(--color-text-primary, #e8edff); font-size: var(--font-size-xl, 1.5rem); font-weight: 700; margin: var(--space-xs, 0.25rem) 0; }
.metric-change { color: var(--color-success, #57d9b7); font-size: var(--font-size-sm, 0.85rem); }
.analytics-placeholder { color: var(--color-text-dim, #7a8da6); font-size: var(--font-size-base, 0.9rem); text-align: center; padding: var(--space-2xl, 2rem); }
</style>
frontend/src/lib/components/Breadcrumbs.svelte
+1 -1
View File
@@ -16,7 +16,7 @@
.breadcrumbs {
display: flex;
align-items: center;
gap: 0.5rem;
gap: var(--space-sm, 0.5rem);
padding: var(--space-md, 0.75rem) 1.5rem;
font-size: var(--font-size-sm, 0.85rem);
border-bottom: 1px solid rgb(255 255 255 / 8%);
frontend/src/lib/components/BreakSuggestion.svelte
+2 -2
View File
@@ -24,11 +24,11 @@
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
gap: var(--space-md, 0.75rem);
padding: var(--space-sm, 0.5rem) 0.75rem;
border-radius: 0.35rem;
font-size: var(--font-size-sm, 0.85rem);
margin-bottom: 0.5rem;
margin-bottom: var(--space-sm, 0.5rem);
}
.break-suggestion.gentle {
background: rgba(88, 166, 255, 0.15);
frontend/src/lib/components/Button.svelte
+1 -1
View File
@@ -43,7 +43,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
gap: var(--space-xs, 0.4rem);
padding: var(--space-sm, 0.5rem) 1.25rem;
border: 1px solid rgb(255 255 255 / 15%);
border-radius: 0.5rem;
frontend/src/lib/components/CollapsibleSection.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
</div>
<style>
.collapsible { border: 1px solid rgb(255 255 255 / 8%); border-radius: 0.5rem; margin-bottom: 0.25rem; }
.collapsible { border: 1px solid rgb(255 255 255 / 8%); border-radius: 0.5rem; margin-bottom: var(--space-xs, 0.25rem); }
.collapsible-header {
display: flex; justify-content: space-between; align-items: center;
width: 100%; padding: 0.35rem 0.75rem; background: none; border: none;
frontend/src/lib/components/ComposePanel.svelte
+3 -3
View File
@@ -95,7 +95,7 @@
.compose-panel {
display: flex;
flex-direction: column;
gap: 1rem;
gap: var(--space-lg, 1rem);
padding: var(--space-lg, 1.25rem);
background: rgb(15 20 32 / 90%);
border-radius: 0.75rem;
@@ -131,7 +131,7 @@
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
gap: var(--space-md, 0.75rem);
}
.save-status {
color: var(--color-text-secondary, #9fb0ca);
@@ -141,7 +141,7 @@
.char-count {
display: flex;
align-items: center;
gap: 0.5rem;
gap: var(--space-sm, 0.5rem);
font-size: var(--font-size-sm, 0.8rem);
color: var(--color-text-secondary, #9fb0ca);
}
frontend/src/lib/components/PlaceholderCard.svelte
+2 -2
View File
@@ -42,14 +42,14 @@
color: var(--color-text-secondary, #9fb0ca);
}
.placeholder-card p {
margin: 0.5rem 0 0;
margin: var(--space-sm, 0.5rem) 0 0;
font-size: var(--font-size-sm, 0.85rem);
color: var(--color-text-dim, #7a8da6);
}
.status-tag {
display: inline-block;
width: fit-content;
margin-top: 0.75rem;
margin-top: var(--space-md, 0.75rem);
padding: 0.3rem 0.65rem;
border-radius: 999px;
font-size: var(--font-size-xs, 0.75rem);
frontend/src/lib/components/PlatformConnector.svelte
+2 -2
View File
@@ -14,9 +14,9 @@
<style>
.platform-connector {
display: flex; align-items: center; gap: 0.75rem;
display: flex; align-items: center; gap: var(--space-md, 0.75rem);
padding: var(--space-md, 0.75rem); border: 1px solid rgb(255 255 255 / 8%);
border-radius: 0.5rem; margin-bottom: 0.5rem;
border-radius: 0.5rem; margin-bottom: var(--space-sm, 0.5rem);
}
.status-connected { color: var(--color-success, #57d9b7); font-size: var(--font-size-sm, 0.85rem); }
.status-unavailable { color: var(--color-text-secondary, #9fb0ca); font-size: var(--font-size-sm, 0.85rem); }
frontend/src/lib/components/PlatformPrivacyNotice.svelte
+3 -3
View File
@@ -35,13 +35,13 @@
border: 1px solid rgb(139 156 255 / 25%);
border-radius: 0.65rem;
background: rgb(139 156 255 / 8%);
margin-bottom: 1rem;
margin-bottom: var(--space-lg, 1rem);
}
.privacy-notice h3 { margin: 0 0 0.5rem; font-size: var(--font-size-lg, 1rem); }
.privacy-notice p { margin: 0.35rem 0; font-size: var(--font-size-base, 0.9rem); color: var(--color-text-primary, #dbe3ff); }
.privacy-notice ul { margin: 0.5rem 0; padding-left: 1.1rem; font-size: var(--font-size-sm, 0.85rem); color: var(--color-text-secondary, #c9d6f0); }
.privacy-notice ul { margin: var(--space-sm, 0.5rem) 0; padding-left: 1.1rem; font-size: var(--font-size-sm, 0.85rem); color: var(--color-text-secondary, #c9d6f0); }
.privacy-promise { font-weight: 500; }
.privacy-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.privacy-actions { display: flex; gap: var(--space-sm, 0.5rem); margin-top: var(--space-md, 0.75rem); }
.privacy-actions button {
padding: 0.45rem 0.9rem;
border-radius: 0.45rem;
frontend/src/lib/components/PlatformPrivacyScreen.svelte
+2 -2
View File
@@ -73,7 +73,7 @@
<style>
.privacy-screen {
display: grid;
gap: 1.25rem;
gap: var(--space-lg, 1.25rem);
}
.privacy-screen h2 { margin: 0; }
.privacy-lead {
@@ -90,7 +90,7 @@
.privacy-lists {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
gap: var(--space-lg, 1rem);
}
.privacy-lists ul {
margin: 0.35rem 0 0;
frontend/src/lib/components/ScheduledCalendar.svelte
+2 -2
View File
@@ -51,7 +51,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
margin-bottom: var(--space-md, 0.75rem);
}
.calendar-title { font-weight: 600; color: var(--color-text-primary, #e8edff); }
.calendar-header button {
@@ -64,7 +64,7 @@
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.25rem;
gap: var(--space-xs, 0.25rem);
}
.calendar-day-header {
text-align: center;
frontend/src/lib/components/StarterSprint.svelte
+4 -4
View File
@@ -63,16 +63,16 @@
border-radius: 0.5rem;
padding: var(--space-md, 0.75rem) 1rem;
background: var(--surface, #161b22);
margin-bottom: 0.75rem;
margin-bottom: var(--space-md, 0.75rem);
}
.starter-sprint.active { border-color: var(--accent, #58a6ff); }
.starter-sprint.success { border-color: var(--success, #3fb950); }
h2 { margin: 0 0 0.25rem; font-size: var(--font-size-base, 0.95rem); color: var(--text, #c9d1d9); }
.hint { margin: 0 0 0.75rem; color: var(--text-dim, #8b949e); font-size: var(--font-size-sm, 0.85rem); }
.sprint-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.sprint-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm, 0.5rem); }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent, #58a6ff); }
.task-row { display: flex; justify-content: space-between; margin-bottom: 0.75rem; font-size: var(--font-size-base, 0.9rem); }
.actions { display: flex; gap: 0.5rem; }
.task-row { display: flex; justify-content: space-between; margin-bottom: var(--space-md, 0.75rem); font-size: var(--font-size-base, 0.9rem); }
.actions { display: flex; gap: var(--space-sm, 0.5rem); }
button { cursor: pointer; border-radius: 0.35rem; padding: 0.45rem 0.75rem; font: inherit; }
.primary { background: var(--accent, #58a6ff); color: var(--color-surface-primary, #0d1117); border: none; }
.secondary { background: transparent; border: 1px solid var(--border, #30363d); color: var(--text, #c9d1d9); }
frontend/src/lib/components/TitleBar.svelte
+1 -1
View File
@@ -74,7 +74,7 @@
.title-bar-actions {
display: flex;
gap: 0.35rem;
gap: var(--space-xs, 0.35rem);
-webkit-app-region: no-drag;
app-region: no-drag;
}
frontend/src/lib/components/TransitionNudge.svelte
+1 -1
View File
@@ -23,7 +23,7 @@
.transition-nudge {
display: flex;
align-items: center;
gap: 0.75rem;
gap: var(--space-md, 0.75rem);
padding: var(--space-md, 0.75rem) 1rem;
border: 1px solid rgb(139 156 255 / 25%);
border-radius: 0.65rem;
frontend/src/lib/components/WelcomeBackBanner.svelte
+2 -2
View File
@@ -18,9 +18,9 @@
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
gap: var(--space-md, 0.75rem);
padding: var(--space-md, 0.75rem) 1rem;
margin-bottom: 0.75rem;
margin-bottom: var(--space-md, 0.75rem);
background: var(--surface, #161b22);
border: 1px solid var(--border, #30363d);
border-radius: 0.5rem;
frontend/src/lib/components/shell/BreadcrumbBar.svelte
+1 -1
View File
@@ -31,7 +31,7 @@
.breadcrumb-bar {
display: flex;
align-items: center;
gap: 0.35rem;
gap: var(--space-xs, 0.35rem);
padding: var(--space-sm, 0.5rem) 0.75rem;
font-size: var(--font-size-sm, 0.8rem);
}
frontend/src/lib/components/shell/LeftSidebar.svelte
+3 -3
View File
@@ -43,7 +43,7 @@
display: flex;
flex-direction: column;
padding: var(--space-md, 0.75rem);
gap: 0.35rem;
gap: var(--space-xs, 0.35rem);
height: 100%;
border-right: 1px solid var(--border-subtle, rgb(255 255 255 / 8%));
}
@@ -51,10 +51,10 @@
.brand-lockup {
display: flex;
align-items: center;
gap: 0.5rem;
gap: var(--space-sm, 0.5rem);
padding: var(--space-sm, 0.5rem) 0.25rem 0.75rem;
border-bottom: 1px solid var(--border-subtle, rgb(255 255 255 / 8%));
margin-bottom: 0.25rem;
margin-bottom: var(--space-xs, 0.25rem);
}
.brand-mark { font-size: var(--font-size-xl, 1.25rem); }
.brand-name { font-weight: 600; font-size: var(--font-size-base, 0.95rem); }
frontend/src/lib/components/shell/RightSidebar.svelte
+1 -1
View File
@@ -53,7 +53,7 @@
flex-shrink: 0;
}
.panel-title { font-size: var(--font-size-base, 0.9rem); font-weight: 600; }
.panel-actions { display: flex; gap: 0.25rem; }
.panel-actions { display: flex; gap: var(--space-xs, 0.25rem); }
.panel-btn {
width: 24px;
height: 24px;
frontend/src/lib/components/shell/ShellStatusBar.svelte
+1 -1
View File
@@ -31,7 +31,7 @@
.shell-status-bar {
display: flex;
align-items: center;
gap: 0.5rem;
gap: var(--space-sm, 0.5rem);
padding: 0.35rem 0.75rem;
border-top: 1px solid var(--border-subtle, rgb(255 255 255 / 8%));
background: var(--surface-1);
frontend/src/routes/calendar/CalendarView.svelte
+2 -2
View File
@@ -36,12 +36,12 @@
</div>
<style>
.calendar-view { display: grid; gap: 1.5rem; }
.calendar-view { display: grid; gap: var(--space-xl, 1.5rem); }
.upcoming-posts { padding: 0 0.5rem; }
.upcoming-posts h3 { margin: 0 0 0.75rem; font-size: var(--font-size-lg, 1rem); }
.upcoming-item {
display: flex;
gap: 1rem;
gap: var(--space-lg, 1rem);
align-items: center;
padding: 0.65rem 0;
border-bottom: 1px solid rgb(255 255 255 / 6%);
frontend/src/routes/comments/CommentsView.svelte
+2 -2
View File
@@ -13,12 +13,12 @@
<style>
.comments-view { padding: var(--space-lg, 1rem) 0; }
.comments-placeholder { color: var(--color-text-dim, #7a8da6); margin-bottom: 1.5rem; }
.comments-placeholder { color: var(--color-text-dim, #7a8da6); margin-bottom: var(--space-xl, 1.5rem); }
.comment-preview-item {
padding: var(--space-md, 0.75rem);
border: 1px solid rgb(255 255 255 / 8%);
border-radius: 0.5rem;
margin-bottom: 0.5rem;
margin-bottom: var(--space-sm, 0.5rem);
}
.comment-platform { display: block; font-size: var(--font-size-xs, 0.75rem); color: var(--color-accent, #8b9cff); margin-bottom: 0.35rem; text-transform: uppercase; }
.comment-preview-item p { margin: 0; font-size: var(--font-size-base, 0.9rem); }
frontend/src/routes/daily-feed/DailyFeedView.svelte
+5 -5
View File
@@ -83,7 +83,7 @@
.daily-feed { padding: var(--space-sm, 0.5rem); overflow-y: auto; height: 100%; box-sizing: border-box; }
.feed-subtitle { color: var(--color-text-secondary, #9fb0ca); margin: 0 0 0.5rem; }
.feed-muted { color: var(--color-text-dim, #7a8da6); font-size: var(--font-size-sm, 0.8rem); }
.feed-summary { margin-bottom: 0.5rem; }
.feed-summary { margin-bottom: var(--space-sm, 0.5rem); }
.feed-summary h2 { font-size: var(--font-size-lg, 1rem); margin: 0 0 0.25rem; }
.feed-card {
padding: 0.35rem 0.5rem;
@@ -98,11 +98,11 @@
}
.feed-card h3 { margin: 0 0 0.15rem; font-size: var(--font-size-sm, 0.85rem); }
.count { font-weight: normal; font-size: var(--font-size-sm, 0.85rem); color: var(--color-text-dim, #7a8da6); }
.priority-list { list-style: none; padding: 0; margin: 0.25rem 0 0; }
.priority-list { list-style: none; padding: 0; margin: var(--space-xs, 0.25rem) 0 0; }
.priority-list li { display: flex; justify-content: space-between; padding: var(--space-xs, 0.25rem) 0; font-size: var(--font-size-base, 0.9rem); }
.priority-item { align-items: center; gap: 0.5rem; }
.priority-label { display: inline-flex; align-items: center; gap: 0.35rem; }
.energy-toggle { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; }
.priority-item { align-items: center; gap: var(--space-sm, 0.5rem); }
.priority-label { display: inline-flex; align-items: center; gap: var(--space-xs, 0.35rem); }
.energy-toggle { display: flex; gap: var(--space-xs, 0.25rem); margin-bottom: var(--space-sm, 0.5rem); }
.energy-button {
background: transparent;
border: 1px solid var(--border, #30363d);
frontend/src/routes/scheduler/SchedulerView.svelte
+10 -10
View File
@@ -164,10 +164,10 @@
.scheduler { padding: var(--space-xl, 1.5rem); }
.scheduler-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 1.5rem;
margin-bottom: var(--space-xl, 1.5rem);
}
.scheduler-header h1 { font-size: var(--font-size-xl, 1.25rem); margin: 0; }
.scheduler-filters { display: flex; gap: 0.5rem; align-items: center; }
.scheduler-filters { display: flex; gap: var(--space-sm, 0.5rem); align-items: center; }
.scheduler-filters select {
background: var(--surface, #161b22); border: 1px solid var(--border, #30363d);
color: var(--text, #c9d1d9); padding: 0.4rem 0.75rem; border-radius: 6px;
@@ -184,7 +184,7 @@
color: var(--text-dim, #8b949e);
}
.scheduler-layout { display: flex; gap: 1.5rem; }
.scheduler-layout { display: flex; gap: var(--space-xl, 1.5rem); }
.calendar-sidebar {
width: 280px; flex-shrink: 0;
background: var(--surface, #161b22); border: 1px solid var(--border, #30363d);
@@ -192,7 +192,7 @@
}
.calendar-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 0.75rem; font-weight: 500;
margin-bottom: var(--space-md, 0.75rem); font-weight: 500;
}
.calendar-header button {
background: none; border: none; color: var(--text, #c9d1d9);
@@ -217,9 +217,9 @@
background: var(--hover, #1c2129);
}
.post-queue { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.post-queue { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm, 0.5rem); }
.post-item {
display: flex; align-items: center; gap: 0.75rem;
display: flex; align-items: center; gap: var(--space-md, 0.75rem);
padding: var(--space-md, 0.75rem); background: var(--surface, #161b22);
border: 1px solid var(--border, #30363d); border-radius: 8px;
}
@@ -240,9 +240,9 @@
.post-status.cancelled { opacity: 0.6; font-style: italic; }
.schedule-form {
background: var(--surface, #161b22); border: 1px solid var(--border, #30363d);
border-radius: 8px; padding: var(--space-lg, 1rem); margin-bottom: 1.5rem;
border-radius: 8px; padding: var(--space-lg, 1rem); margin-bottom: var(--space-xl, 1.5rem);
}
.form-fields { display: grid; gap: 0.75rem; }
.form-fields { display: grid; gap: var(--space-md, 0.75rem); }
.form-fields input, .form-fields select, .form-fields textarea {
background: var(--bg, #0d1117); border: 1px solid var(--border, #30363d);
color: var(--text, #c9d1d9); padding: var(--space-sm, 0.5rem) 0.75rem; border-radius: 6px;
@@ -255,7 +255,7 @@
border-radius: 6px; cursor: pointer; font-size: var(--font-size-sm, 0.85rem);
}
.form-actions {
display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;
display: flex; justify-content: flex-end; gap: var(--space-sm, 0.5rem); margin-top: var(--space-lg, 1rem);
}
.form-actions button {
background: var(--surface, #161b22); border: 1px solid var(--border, #30363d);
@@ -263,7 +263,7 @@
cursor: pointer; font-size: var(--font-size-sm, 0.85rem);
}
.form-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.post-actions { display: flex; gap: 0.5rem; }
.post-actions { display: flex; gap: var(--space-sm, 0.5rem); }
.post-actions button {
background: none; border: none; color: var(--text-dim, #8b949e);
cursor: pointer; font-size: var(--font-size-base, 0.9rem);