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

refactor(web): replace hardcoded app colors

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-05 10:17:06 -07:00
parent 2d26181aaf
commit 6ede2bee7e
25 changed files with 96 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/app/(app)/reviews/page.tsx
View File

@ -272,8 +272,8 @@ export default function ReviewsPage() {
? selectedBatchIds.has(item.id) ? "var(--nl-accent-primary)" : undefined ? selectedBatchIds.has(item.id) ? "var(--nl-accent-primary)" : undefined
: featuredProposal?.id === item.id ? "var(--nl-accent-primary)" : undefined, : featuredProposal?.id === item.id ? "var(--nl-accent-primary)" : undefined,
background: batchMode background: batchMode
? selectedBatchIds.has(item.id) ? "rgba(90, 140, 255, 0.12)" : undefined ? selectedBatchIds.has(item.id) ? "var(--nl-accent-muted)" : undefined
: featuredProposal?.id === item.id ? "rgba(90, 140, 255, 0.12)" : undefined, : featuredProposal?.id === item.id ? "var(--nl-accent-muted)" : undefined,
}} }}
> >
<div style={{ display: "grid", gap: 4 }}> <div style={{ display: "grid", gap: 4 }}>

12
web/src/app/(app)/settings/page.tsx
View File

@ -64,7 +64,7 @@ export default function SettingsPage() {
title="Settings" title="Settings"
description="Account, preferences, feedback, and session management." description="Account, preferences, feedback, and session management."
actions={ actions={
<button onClick={logout} style={{ padding: "6px 14px", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", border: "none", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}> <button onClick={logout} style={{ padding: "6px 14px", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", border: "none", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}>
Sign out Sign out
</button> </button>
} }
@ -97,12 +97,12 @@ export default function SettingsPage() {
{/* Change password */} {/* Change password */}
<article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}> <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<strong>Change password</strong> <strong>Change password</strong>
{error && <div style={{ color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}>{error}</div>} {error && <div style={{ color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>{error}</div>}
{success && <div style={{ color: "#4ADE80", fontSize: "var(--nl-fs-sm)" }}>{success}</div>} {success && <div style={{ color: "var(--nl-status-success)", fontSize: "var(--nl-fs-sm)" }}>{success}</div>}
<form onSubmit={handleChangePassword} style={{ display: "grid", gap: "var(--nl-space-3)" }}> <form onSubmit={handleChangePassword} style={{ display: "grid", gap: "var(--nl-space-3)" }}>
<input className="input-shell" type="password" placeholder="Current password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} required /> <input className="input-shell" type="password" placeholder="Current password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} required />
<input className="input-shell" type="password" placeholder="New password" minLength={8} value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required /> <input className="input-shell" type="password" placeholder="New password" minLength={8} value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required />
<button type="submit" disabled={isLoading} style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}> <button type="submit" disabled={isLoading} style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}>
{isLoading ? "Updating…" : "Update password"} {isLoading ? "Updating…" : "Update password"}
</button> </button>
</form> </form>
@ -111,7 +111,7 @@ export default function SettingsPage() {
{/* Danger zone */} {/* Danger zone */}
<article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}> <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<strong>Danger zone</strong> <strong>Danger zone</strong>
<button onClick={handleDeleteAccount} style={{ padding: "8px 16px", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}> <button onClick={handleDeleteAccount} style={{ padding: "8px 16px", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}>
Delete account Delete account
</button> </button>
</article> </article>
@ -188,7 +188,7 @@ MCP API base: ${MCP_SERVER_URL}
<button <button
onClick={handleSubmitFeedback} onClick={handleSubmitFeedback}
disabled={submittingFeedback || !feedbackTitle.trim()} disabled={submittingFeedback || !feedbackTitle.trim()}
style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }} style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, justifySelf: "start" }}
> >
{submittingFeedback ? "Sending…" : "Send feedback"} {submittingFeedback ? "Sending…" : "Send feedback"}
</button> </button>

4
web/src/app/(app)/workspaces/page.tsx
View File

@ -145,7 +145,7 @@ function WorkspacesPageInner() {
actions={ actions={
<div style={{ display: "flex", gap: "var(--nl-space-3)" }}> <div style={{ display: "flex", gap: "var(--nl-space-3)" }}>
<button <button
style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600 }} style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600 }}
onClick={() => setShowCreate(true)} onClick={() => setShowCreate(true)}
> >
+ Workspace + Workspace
@ -241,7 +241,7 @@ function WorkspacesPageInner() {
</button> </button>
<button <button
onClick={() => handleDelete(workspace.id, workspace.name)} onClick={() => handleDelete(workspace.id, workspace.name)}
style={{ padding: "4px 10px", fontSize: "var(--nl-fs-sm)", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", border: "none", borderRadius: "var(--nl-radius-sm)" }} style={{ padding: "4px 10px", fontSize: "var(--nl-fs-sm)", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", border: "none", borderRadius: "var(--nl-radius-sm)" }}
> >
Delete Delete
</button> </button>

6
web/src/app/(auth)/forgot-password/page.tsx
View File

@ -22,13 +22,13 @@ export default function ForgotPasswordPage() {
</p> </p>
{error && ( {error && (
<div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}> <div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>
{error} {error}
</div> </div>
)} )}
{success && ( {success && (
<div role="status" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "rgba(74,222,128,0.12)", color: "#4ADE80", fontSize: "var(--nl-fs-sm)" }}> <div role="status" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "var(--nl-success-muted)", color: "var(--nl-status-success)", fontSize: "var(--nl-fs-sm)" }}>
{success} {success}
</div> </div>
)} )}
@ -49,7 +49,7 @@ export default function ForgotPasswordPage() {
type="submit" type="submit"
disabled={isLoading} disabled={isLoading}
className="input-shell" className="input-shell"
style={{ background: "var(--nl-accent-primary, #5A8CFF)", color: "#fff", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }} style={{ background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }}
> >
{isLoading ? "Sending…" : "Send reset link"} {isLoading ? "Sending…" : "Send reset link"}
</button> </button>

4
web/src/app/(auth)/login/page.tsx
View File

@ -23,7 +23,7 @@ export default function LoginPage() {
<h1 style={{ margin: 0, fontSize: "var(--nl-fs-xl)" }}>Sign in</h1> <h1 style={{ margin: 0, fontSize: "var(--nl-fs-xl)" }}>Sign in</h1>
{error && ( {error && (
<div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}> <div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>
{error} {error}
</div> </div>
)} )}
@ -56,7 +56,7 @@ export default function LoginPage() {
type="submit" type="submit"
disabled={isLoading} disabled={isLoading}
className="input-shell" className="input-shell"
style={{ background: "var(--nl-accent-primary, #5A8CFF)", color: "#fff", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }} style={{ background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }}
> >
{isLoading ? "Signing in…" : "Sign in"} {isLoading ? "Signing in…" : "Sign in"}
</button> </button>

4
web/src/app/(auth)/register/page.tsx
View File

@ -24,7 +24,7 @@ export default function RegisterPage() {
<h1 style={{ margin: 0, fontSize: "var(--nl-fs-xl)" }}>Create account</h1> <h1 style={{ margin: 0, fontSize: "var(--nl-fs-xl)" }}>Create account</h1>
{error && ( {error && (
<div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "rgba(255,110,110,0.12)", color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}> <div role="alert" style={{ padding: "10px 14px", borderRadius: "var(--nl-radius-sm)", background: "var(--nl-danger-muted)", color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>
{error} {error}
</div> </div>
)} )}
@ -70,7 +70,7 @@ export default function RegisterPage() {
type="submit" type="submit"
disabled={isLoading} disabled={isLoading}
className="input-shell" className="input-shell"
style={{ background: "var(--nl-accent-primary, #5A8CFF)", color: "#fff", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }} style={{ background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", fontWeight: 600, cursor: isLoading ? "wait" : "pointer" }}
> >
{isLoading ? "Creating account…" : "Create account"} {isLoading ? "Creating account…" : "Create account"}
</button> </button>

52
web/src/app/globals.css
View File

@ -3,6 +3,23 @@
/* Design tokens imported via @bytelyst/design-tokens/css/notelett in layout.tsx */ /* Design tokens imported via @bytelyst/design-tokens/css/notelett in layout.tsx */
/* === END design tokens === */ /* === END design tokens === */
:root {
--nl-on-accent: white;
--nl-overlay-scrim: color-mix(in srgb, var(--nl-bg-canvas) 64%, transparent);
--nl-overlay-scrim-strong: color-mix(in srgb, var(--nl-bg-canvas) 72%, transparent);
--nl-surface-sidebar: color-mix(in srgb, var(--nl-bg-canvas) 82%, transparent);
--nl-surface-card-translucent: color-mix(in srgb, var(--nl-surface-card) 86%, transparent);
--nl-surface-muted-translucent: color-mix(in srgb, var(--nl-surface-muted) 72%, transparent);
--nl-input-bg: color-mix(in srgb, var(--nl-bg-canvas) 88%, transparent);
--nl-accent-muted: color-mix(in srgb, var(--nl-accent-primary) 16%, transparent);
--nl-accent-muted-strong: color-mix(in srgb, var(--nl-accent-primary) 22%, transparent);
--nl-danger-muted: color-mix(in srgb, var(--nl-danger) 14%, transparent);
--nl-success-muted: color-mix(in srgb, var(--nl-status-success) 14%, transparent);
--nl-warning-muted: color-mix(in srgb, var(--nl-status-warning) 14%, transparent);
--nl-info-muted: color-mix(in srgb, var(--nl-accent-primary) 12%, transparent);
--nl-command-shadow: 0 24px 80px color-mix(in srgb, black 45%, transparent);
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -45,7 +62,7 @@ button {
.sidebar { .sidebar {
border-right: 1px solid var(--nl-border-default); border-right: 1px solid var(--nl-border-default);
background: rgba(12, 17, 31, 0.82); background: var(--nl-surface-sidebar);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
} }
@ -57,14 +74,14 @@ button {
.surface-card { .surface-card {
border: 1px solid var(--nl-border-default); border: 1px solid var(--nl-border-default);
border-radius: var(--nl-radius-md); border-radius: var(--nl-radius-md);
background: rgba(18, 23, 37, 0.86); background: var(--nl-surface-card-translucent);
box-shadow: var(--nl-elevation-md); box-shadow: var(--nl-elevation-md);
} }
.surface-muted { .surface-muted {
border: 1px solid var(--nl-border-default); border: 1px solid var(--nl-border-default);
border-radius: var(--nl-radius-sm); border-radius: var(--nl-radius-sm);
background: rgba(26, 35, 53, 0.72); background: var(--nl-surface-muted-translucent);
} }
.badge { .badge {
@ -73,7 +90,7 @@ button {
gap: 6px; gap: 6px;
border-radius: var(--nl-radius-pill); border-radius: var(--nl-radius-pill);
padding: 6px 10px; padding: 6px 10px;
background: rgba(90, 140, 255, 0.14); background: var(--nl-accent-muted);
color: var(--nl-text-primary); color: var(--nl-text-primary);
font-size: var(--nl-fs-sm); font-size: var(--nl-fs-sm);
} }
@ -82,7 +99,7 @@ button {
width: 100%; width: 100%;
border: 1px solid var(--nl-border-default); border: 1px solid var(--nl-border-default);
border-radius: var(--nl-radius-sm); border-radius: var(--nl-radius-sm);
background: rgba(10, 15, 28, 0.88); background: var(--nl-input-bg);
color: var(--nl-text-primary); color: var(--nl-text-primary);
padding: 12px 14px; padding: 12px 14px;
} }
@ -105,7 +122,7 @@ button {
/* Focus-visible — keyboard accessibility */ /* Focus-visible — keyboard accessibility */
*:focus-visible { *:focus-visible {
outline: 2px solid var(--nl-accent-primary, #5A8CFF); outline: 2px solid var(--nl-accent-primary);
outline-offset: 2px; outline-offset: 2px;
border-radius: 4px; border-radius: 4px;
} }
@ -161,15 +178,15 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
overflow-y: auto; overflow-y: auto;
} }
.app-sidebar.open { left: 0 !important; } .app-sidebar.open { left: 0 !important; }
.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,0.5); } .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 39; background: var(--nl-overlay-scrim); }
.sidebar-overlay.open { display: block; } .sidebar-overlay.open { display: block; }
.sidebar-toggle { .sidebar-toggle {
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
position: fixed; top: 12px; left: 12px; z-index: 38; position: fixed; top: 12px; left: 12px; z-index: 38;
width: 40px; height: 40px; border-radius: 8px; width: 40px; height: 40px; border-radius: 8px;
border: 1px solid var(--nl-border-default, #2a2a4a); border: 1px solid var(--nl-border-default);
background: var(--nl-bg-elevated, #12151c); background: var(--nl-bg-elevated);
color: var(--nl-text-primary, #fff); color: var(--nl-text-primary);
cursor: pointer; font-size: 20px; line-height: 1; cursor: pointer; font-size: 20px; line-height: 1;
} }
} }
@ -188,19 +205,6 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
} }
} }
/* Respect OS dark/light preference */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--nl-bg-canvas: #F8FAFC;
--nl-bg-elevated: #FFFFFF;
--nl-surface-card: #FFFFFF;
--nl-surface-muted: #F1F5F9;
--nl-text-primary: #0F172A;
--nl-text-secondary: #475569;
--nl-text-tertiary: #94A3B8;
}
}
/* ── Responsive Sidebar ──────────────────────────────────────── */ /* ── Responsive Sidebar ──────────────────────────────────────── */
.app-layout { .app-layout {
@ -221,7 +225,7 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
display: none; display: none;
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0,0,0,0.5); background: var(--nl-overlay-scrim);
z-index: 39; z-index: 39;
} }

4
web/src/app/layout.tsx
View File

@ -25,8 +25,8 @@ export const viewport: Viewport = {
width: "device-width", width: "device-width",
initialScale: 1, initialScale: 1,
themeColor: [ themeColor: [
{ media: "(prefers-color-scheme: dark)", color: "#06070A" }, { media: "(prefers-color-scheme: dark)", color: "black" },
{ media: "(prefers-color-scheme: light)", color: "#F8FAFC" }, { media: "(prefers-color-scheme: light)", color: "white" },
], ],
}; };

2
web/src/app/loading.tsx
View File

@ -2,7 +2,7 @@ import { LoadingSpinner } from "@bytelyst/dashboard-components";
export default function Loading() { export default function Loading() {
return ( return (
<div style={{ minHeight: "100vh", display: "grid", placeItems: "center", background: "var(--nl-bg-canvas, #06070A)" }}> <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", background: "var(--nl-bg-canvas)" }}>
<LoadingSpinner size="lg" /> <LoadingSpinner size="lg" />
</div> </div>
); );

2
web/src/app/page.tsx
View File

@ -14,7 +14,7 @@ export default function HomePage() {
</p> </p>
</div> </div>
<div style={{ display: "flex", gap: "var(--nl-space-3)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
<Link href="/dashboard" className="surface-muted" style={{ padding: "12px 16px", background: "rgba(90, 140, 255, 0.16)" }}> <Link href="/dashboard" className="surface-muted" style={{ padding: "12px 16px", background: "var(--nl-accent-muted)" }}>
Open dashboard Open dashboard
</Link> </Link>
<Link href="/workspaces" className="surface-muted" style={{ padding: "12px 16px" }}> <Link href="/workspaces" className="surface-muted" style={{ padding: "12px 16px" }}>

4
web/src/app/providers.tsx
View File

@ -26,9 +26,9 @@ export function Providers({ children }: { children: ReactNode }) {
theme="dark" theme="dark"
toastOptions={{ toastOptions={{
style: { style: {
background: "var(--nl-surface-card, #121725)", background: "var(--nl-surface-card)",
border: "1px solid var(--nl-border-default)", border: "1px solid var(--nl-border-default)",
color: "var(--nl-text-primary, #EFF4FF)", color: "var(--nl-text-primary)",
fontFamily: "var(--nl-font-body)", fontFamily: "var(--nl-font-body)",
}, },
}} }}

2
web/src/app/share/[token]/page.tsx
View File

@ -45,7 +45,7 @@ export default function SharedNotePage() {
}, [token]); }, [token]);
return ( return (
<div style={{ minHeight: "100vh", background: "var(--nl-bg-base, #06070A)", color: "var(--nl-text-primary)", padding: "var(--nl-space-8)" }}> <div style={{ minHeight: "100vh", background: "var(--nl-bg-canvas)", color: "var(--nl-text-primary)", padding: "var(--nl-space-8)" }}>
<header style={{ maxWidth: 720, margin: "0 auto var(--nl-space-6)" }}> <header style={{ maxWidth: 720, margin: "0 auto var(--nl-space-6)" }}>
<div className="badge" style={{ marginBottom: 12 }}> <div className="badge" style={{ marginBottom: 12 }}>
Read-only share · {PRODUCT_NAME} Read-only share · {PRODUCT_NAME}

2
web/src/components/AuthGuard.tsx
View File

@ -36,7 +36,7 @@ export function AuthGuard({ children }: { children: ReactNode }) {
return ( return (
<div style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--nl-space-8)" }}> <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--nl-space-8)" }}>
<div className="surface-card" style={{ padding: "var(--nl-space-8)", maxWidth: 480, textAlign: "center" }}> <div className="surface-card" style={{ padding: "var(--nl-space-8)", maxWidth: 480, textAlign: "center" }}>
<h1 style={{ margin: 0, fontSize: "var(--nl-fs-xl)", color: "var(--nl-danger, #FF6E6E)" }}>Service Unavailable</h1> <h1 style={{ margin: 0, fontSize: "var(--nl-fs-xl)", color: "var(--nl-danger)" }}>Service Unavailable</h1>
<p style={{ marginTop: "var(--nl-space-4)", color: "var(--nl-text-secondary)" }}>{killSwitchMsg}</p> <p style={{ marginTop: "var(--nl-space-4)", color: "var(--nl-text-secondary)" }}>{killSwitchMsg}</p>
</div> </div>
</div> </div>

2
web/src/components/BroadcastBanner.tsx
View File

@ -56,7 +56,7 @@ export function BroadcastBanner() {
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
padding: "var(--nl-space-3) var(--nl-space-4)", padding: "var(--nl-space-3) var(--nl-space-4)",
background: msg.priority === "high" || msg.priority === "urgent" ? "rgba(255,180,70,0.12)" : "rgba(100,160,255,0.10)", background: msg.priority === "high" || msg.priority === "urgent" ? "var(--nl-warning-muted)" : "var(--nl-info-muted)",
borderRadius: "var(--nl-radius-sm)", borderRadius: "var(--nl-radius-sm)",
fontSize: "var(--nl-fs-sm)", fontSize: "var(--nl-fs-sm)",
}} }}

6
web/src/components/CommandPalette.tsx
View File

@ -167,7 +167,7 @@ export function CommandPalette() {
position: "fixed", position: "fixed",
inset: 0, inset: 0,
zIndex: 200, zIndex: 200,
background: "rgba(0,0,0,0.55)", background: "var(--nl-overlay-scrim-strong)",
display: "grid", display: "grid",
placeItems: "start center", placeItems: "start center",
paddingTop: "12vh", paddingTop: "12vh",
@ -183,7 +183,7 @@ export function CommandPalette() {
overflow: "hidden", overflow: "hidden",
display: "grid", display: "grid",
gridTemplateRows: "auto 1fr", gridTemplateRows: "auto 1fr",
boxShadow: "0 24px 80px rgba(0,0,0,0.45)", boxShadow: "var(--nl-command-shadow)",
}} }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
@ -219,7 +219,7 @@ export function CommandPalette() {
borderRadius: "var(--nl-radius-md)", borderRadius: "var(--nl-radius-md)",
textDecoration: "none", textDecoration: "none",
color: "var(--nl-text-primary)", color: "var(--nl-text-primary)",
background: idx === activeIndex ? "rgba(90,140,255,0.2)" : "transparent", background: idx === activeIndex ? "var(--nl-accent-muted-strong)" : "transparent",
border: idx === activeIndex ? "1px solid var(--nl-accent-primary)" : "1px solid transparent", border: idx === activeIndex ? "1px solid var(--nl-accent-primary)" : "1px solid transparent",
}} }}
onMouseEnter={() => setActiveIndex(idx)} onMouseEnter={() => setActiveIndex(idx)}

22
web/src/components/CreateNoteModal.tsx
View File

@ -65,7 +65,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
style={{ style={{
position: "fixed", position: "fixed",
inset: 0, inset: 0,
background: "rgba(0,0,0,0.5)", background: "var(--nl-overlay-scrim)",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
@ -79,18 +79,18 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="surface-card" className="surface-card"
style={{ style={{
padding: "var(--nl-space-6, 1.5rem)", padding: "var(--nl-space-6)",
width: "100%", width: "100%",
maxWidth: 520, maxWidth: 520,
display: "grid", display: "grid",
gap: "var(--nl-space-4, 1rem)", gap: "var(--nl-space-4)",
}} }}
> >
<div style={{ fontSize: "var(--nl-fs-xl, 1.25rem)", fontWeight: 700 }}>Create Note</div> <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Create Note</div>
{error && <div style={{ color: "var(--nl-danger, #e53e3e)", fontSize: "0.875rem" }}>{error}</div>} {error && <div style={{ color: "var(--nl-danger)", fontSize: "0.875rem" }}>{error}</div>}
<label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}> <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
<span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Template</span> <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Template</span>
<select <select
className="input" className="input"
@ -113,7 +113,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
</select> </select>
</label> </label>
<label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}> <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
<span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Workspace</span> <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Workspace</span>
<select value={workspaceId} onChange={(e) => setWorkspaceId(e.target.value)} className="input"> <select value={workspaceId} onChange={(e) => setWorkspaceId(e.target.value)} className="input">
{workspaces.map((ws) => ( {workspaces.map((ws) => (
@ -124,7 +124,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
</select> </select>
</label> </label>
<label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}> <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
<span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Title</span> <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Title</span>
<input <input
className="input" className="input"
@ -136,7 +136,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
/> />
</label> </label>
<label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}> <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
<span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Body</span> <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Body</span>
<textarea <textarea
className="input" className="input"
@ -148,7 +148,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
/> />
</label> </label>
<label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}> <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
<span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Tags (comma-separated)</span> <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Tags (comma-separated)</span>
<input <input
className="input" className="input"
@ -159,7 +159,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
/> />
</label> </label>
<div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3, 0.75rem)" }}> <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3)" }}>
<button type="button" className="btn btn-secondary" onClick={onClose}> <button type="button" className="btn btn-secondary" onClick={onClose}>
Cancel Cancel
</button> </button>

6
web/src/components/CreateWorkspaceModal.tsx
View File

@ -37,7 +37,7 @@ export function CreateWorkspaceModal({ onCreated, onClose }: Props) {
return ( return (
<div <div
style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 }} style={{ position: "fixed", inset: 0, background: "var(--nl-overlay-scrim)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 }}
onClick={(e) => { if (e.target === e.currentTarget) onClose(); }} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
> >
<form <form
@ -47,7 +47,7 @@ export function CreateWorkspaceModal({ onCreated, onClose }: Props) {
> >
<div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Create Workspace</div> <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Create Workspace</div>
{error && <div style={{ color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}>{error}</div>} {error && <div style={{ color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>{error}</div>}
<label style={{ display: "grid", gap: 6 }}> <label style={{ display: "grid", gap: 6 }}>
<span style={{ fontWeight: 600, fontSize: "var(--nl-fs-sm)" }}>Name</span> <span style={{ fontWeight: 600, fontSize: "var(--nl-fs-sm)" }}>Name</span>
@ -61,7 +61,7 @@ export function CreateWorkspaceModal({ onCreated, onClose }: Props) {
<div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3)" }}> <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3)" }}>
<button type="button" className="surface-muted" style={{ padding: "8px 16px", border: "none" }} onClick={onClose}>Cancel</button> <button type="button" className="surface-muted" style={{ padding: "8px 16px", border: "none" }} onClick={onClose}>Cancel</button>
<button type="submit" disabled={!name.trim() || saving} style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600 }}> <button type="submit" disabled={!name.trim() || saving} style={{ padding: "8px 16px", background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600 }}>
{saving ? "Creating…" : "Create"} {saving ? "Creating…" : "Create"}
</button> </button>
</div> </div>

26
web/src/components/LinkNoteModal.tsx
View File

@ -66,7 +66,7 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
style={{ style={{
position: "fixed", position: "fixed",
inset: 0, inset: 0,
background: "rgba(0,0,0,0.5)", background: "var(--nl-overlay-scrim)",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
@ -79,18 +79,18 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
<div <div
className="surface-card" className="surface-card"
style={{ style={{
padding: "var(--nl-space-6, 1.5rem)", padding: "var(--nl-space-6)",
width: "100%", width: "100%",
maxWidth: 520, maxWidth: 520,
display: "grid", display: "grid",
gap: "var(--nl-space-4, 1rem)", gap: "var(--nl-space-4)",
}} }}
> >
<div style={{ fontSize: "var(--nl-fs-xl, 1.25rem)", fontWeight: 700 }}>Link Note</div> <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Link Note</div>
{error && <div style={{ color: "var(--nl-danger, #e53e3e)", fontSize: "0.875rem" }}>{error}</div>} {error && <div style={{ color: "var(--nl-danger)", fontSize: "0.875rem" }}>{error}</div>}
<form onSubmit={handleSearch} style={{ display: "flex", gap: "var(--nl-space-2, 0.5rem)" }}> <form onSubmit={handleSearch} style={{ display: "flex", gap: "var(--nl-space-2)" }}>
<input <input
className="input" className="input"
type="text" type="text"
@ -106,33 +106,33 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
</form> </form>
{searched && results.length === 0 && ( {searched && results.length === 0 && (
<div style={{ color: "var(--nl-text-secondary, #888)", fontSize: "0.875rem" }}>No matching notes found.</div> <div style={{ color: "var(--nl-text-secondary)", fontSize: "0.875rem" }}>No matching notes found.</div>
)} )}
{results.length > 0 && ( {results.length > 0 && (
<div style={{ maxHeight: 200, overflowY: "auto", display: "grid", gap: "var(--nl-space-2, 0.5rem)" }}> <div style={{ maxHeight: 200, overflowY: "auto", display: "grid", gap: "var(--nl-space-2)" }}>
{results.map((note) => ( {results.map((note) => (
<button <button
key={note.id} key={note.id}
type="button" type="button"
className={selectedId === note.id ? "surface-card" : "surface-muted"} className={selectedId === note.id ? "surface-card" : "surface-muted"}
style={{ style={{
padding: "var(--nl-space-3, 0.75rem)", padding: "var(--nl-space-3)",
textAlign: "left", textAlign: "left",
cursor: "pointer", cursor: "pointer",
border: selectedId === note.id ? "2px solid var(--nl-accent, #5a8cff)" : "2px solid transparent", border: selectedId === note.id ? "2px solid var(--nl-accent-primary)" : "2px solid transparent",
}} }}
onClick={() => setSelectedId(note.id)} onClick={() => setSelectedId(note.id)}
> >
<div style={{ fontWeight: 600 }}>{note.title}</div> <div style={{ fontWeight: 600 }}>{note.title}</div>
<div style={{ color: "var(--nl-text-secondary, #888)", fontSize: "0.875rem" }}>{note.excerpt}</div> <div style={{ color: "var(--nl-text-secondary)", fontSize: "0.875rem" }}>{note.excerpt}</div>
</button> </button>
))} ))}
</div> </div>
)} )}
{selectedId && ( {selectedId && (
<label style={{ display: "grid", gap: "var(--nl-space-1, 0.25rem)" }}> <label style={{ display: "grid", gap: "var(--nl-space-1)" }}>
<span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Relationship type</span> <span style={{ fontWeight: 600, fontSize: "0.875rem" }}>Relationship type</span>
<select value={relationshipType} onChange={(e) => setRelationshipType(e.target.value)} className="input"> <select value={relationshipType} onChange={(e) => setRelationshipType(e.target.value)} className="input">
{RELATIONSHIP_TYPES.map((rt) => ( {RELATIONSHIP_TYPES.map((rt) => (
@ -144,7 +144,7 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
</label> </label>
)} )}
<div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3, 0.75rem)" }}> <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--nl-space-3)" }}>
<button type="button" className="btn btn-secondary" onClick={onClose}> <button type="button" className="btn btn-secondary" onClick={onClose}>
Cancel Cancel
</button> </button>

2
web/src/components/NoteEditor.tsx
View File

@ -21,7 +21,7 @@ const TOOLBAR_BTN: React.CSSProperties = {
const TOOLBAR_BTN_ACTIVE: React.CSSProperties = { const TOOLBAR_BTN_ACTIVE: React.CSSProperties = {
...TOOLBAR_BTN, ...TOOLBAR_BTN,
background: "rgba(90,140,255,0.18)", background: "var(--nl-accent-muted-strong)",
color: "var(--nl-text-primary)", color: "var(--nl-text-primary)",
}; };

2
web/src/components/PalacePanel.tsx
View File

@ -100,7 +100,7 @@ export function PalacePanel({ wingId }: PalacePanelProps) {
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span <span
className="badge" className="badge"
style={{ backgroundColor: hallColor[mem.hall] ?? "var(--nl-text-secondary)", color: "#fff", fontSize: "0.75rem" }} style={{ backgroundColor: hallColor[mem.hall] ?? "var(--nl-text-secondary)", color: "var(--nl-on-accent)", fontSize: "0.75rem" }}
> >
{mem.hall} {mem.hall}
</span> </span>

2
web/src/components/PromptTemplateEditor.tsx
View File

@ -62,7 +62,7 @@ export function PromptTemplateEditor({ onClose, onCreated }: PromptTemplateEdito
return ( return (
<div <div
style={{ position: "fixed", inset: 0, zIndex: 100, display: "grid", placeItems: "center", backgroundColor: "rgba(0,0,0,0.5)" }} style={{ position: "fixed", inset: 0, zIndex: 100, display: "grid", placeItems: "center", backgroundColor: "var(--nl-overlay-scrim)" }}
onClick={(e) => { if (e.target === e.currentTarget) onClose(); }} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"

2
web/src/components/RunPromptModal.tsx
View File

@ -57,7 +57,7 @@ export function RunPromptModal({
zIndex: 100, zIndex: 100,
display: "grid", display: "grid",
placeItems: "center", placeItems: "center",
backgroundColor: "rgba(0,0,0,0.5)", backgroundColor: "var(--nl-overlay-scrim)",
}} }}
onClick={(e) => { if (e.target === e.currentTarget) onClose(); }} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
role="dialog" role="dialog"

2
web/src/components/ShareDialog.tsx
View File

@ -97,7 +97,7 @@ export function ShareDialog({ noteId, workspaceId, noteTitle, onClose }: ShareDi
style={{ style={{
position: "fixed", position: "fixed",
inset: 0, inset: 0,
background: "rgba(0,0,0,0.5)", background: "var(--nl-overlay-scrim)",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",

2
web/src/components/Sidebar.tsx
View File

@ -52,7 +52,7 @@ export function Sidebar({ open }: { open?: boolean }) {
gap: "var(--nl-space-3)", gap: "var(--nl-space-3)",
padding: "12px 14px", padding: "12px 14px",
borderColor: active ? "var(--nl-accent-primary)" : undefined, borderColor: active ? "var(--nl-accent-primary)" : undefined,
background: active ? "rgba(90, 140, 255, 0.16)" : undefined, background: active ? "var(--nl-accent-muted)" : undefined,
}} }}
> >
<Icon size={18} /> <Icon size={18} />

12
web/src/components/SurveyBanner.tsx
View File

@ -80,10 +80,10 @@ export function SurveyBanner() {
if (!started) { if (!started) {
return ( return (
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "var(--nl-space-3) var(--nl-space-4)", background: "rgba(100,200,120,0.10)", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}> <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "var(--nl-space-3) var(--nl-space-4)", background: "var(--nl-success-muted)", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}>
<span><strong>{survey.title}</strong> — Quick survey ({survey.questions.length} questions)</span> <span><strong>{survey.title}</strong> — Quick survey ({survey.questions.length} questions)</span>
<div style={{ display: "flex", gap: "var(--nl-space-3)" }}> <div style={{ display: "flex", gap: "var(--nl-space-3)" }}>
<button onClick={handleStart} style={{ background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", padding: "4px 12px", fontWeight: 600, cursor: "pointer" }}>Start</button> <button onClick={handleStart} style={{ background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", padding: "4px 12px", fontWeight: 600, cursor: "pointer" }}>Start</button>
<button onClick={dismiss} style={{ background: "none", border: "none", color: "var(--nl-text-secondary)", cursor: "pointer" }}>&times;</button> <button onClick={dismiss} style={{ background: "none", border: "none", color: "var(--nl-text-secondary)", cursor: "pointer" }}>&times;</button>
</div> </div>
</div> </div>
@ -113,7 +113,7 @@ export function SurveyBanner() {
} }
return ( return (
<div style={{ padding: "var(--nl-space-4)", background: "rgba(100,200,120,0.08)", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}> <div style={{ padding: "var(--nl-space-4)", background: "var(--nl-success-muted)", borderRadius: "var(--nl-radius-sm)", fontSize: "var(--nl-fs-sm)" }}>
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "var(--nl-space-3)" }}> <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "var(--nl-space-3)" }}>
<strong>{question.text}</strong> <strong>{question.text}</strong>
<span style={{ color: "var(--nl-text-secondary)" }}>{currentIdx + 1}/{survey.questions.length}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{currentIdx + 1}/{survey.questions.length}</span>
@ -139,7 +139,7 @@ export function SurveyBanner() {
borderRadius: "var(--nl-radius-sm)", borderRadius: "var(--nl-radius-sm)",
border: getRatingValue() === n ? "2px solid var(--nl-accent-primary)" : "1px solid var(--nl-border-default)", border: getRatingValue() === n ? "2px solid var(--nl-accent-primary)" : "1px solid var(--nl-border-default)",
background: getRatingValue() === n ? "var(--nl-accent-primary)" : "transparent", background: getRatingValue() === n ? "var(--nl-accent-primary)" : "transparent",
color: getRatingValue() === n ? "#fff" : "var(--nl-text-primary)", color: getRatingValue() === n ? "var(--nl-on-accent)" : "var(--nl-text-primary)",
cursor: "pointer", fontWeight: 600, cursor: "pointer", fontWeight: 600,
}} }}
> >
@ -159,7 +159,7 @@ export function SurveyBanner() {
padding: "4px 12px", padding: "4px 12px",
borderRadius: "var(--nl-radius-sm)", borderRadius: "var(--nl-radius-sm)",
border: getChoiceValue() === opt.id ? "2px solid var(--nl-accent-primary)" : "1px solid var(--nl-border-default)", border: getChoiceValue() === opt.id ? "2px solid var(--nl-accent-primary)" : "1px solid var(--nl-border-default)",
background: getChoiceValue() === opt.id ? "rgba(90,140,255,0.15)" : "transparent", background: getChoiceValue() === opt.id ? "var(--nl-accent-muted)" : "transparent",
cursor: "pointer", cursor: "pointer",
}} }}
> >
@ -174,7 +174,7 @@ export function SurveyBanner() {
<button <button
onClick={handleNext} onClick={handleNext}
disabled={!hasAnswer} disabled={!hasAnswer}
style={{ padding: "4px 14px", background: "var(--nl-accent-primary)", color: "#fff", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, cursor: "pointer" }} style={{ padding: "4px 14px", background: "var(--nl-accent-primary)", color: "var(--nl-on-accent)", border: "none", borderRadius: "var(--nl-radius-sm)", fontWeight: 600, cursor: "pointer" }}
> >
{currentIdx < survey.questions.length - 1 ? "Next" : "Submit"} {currentIdx < survey.questions.length - 1 ? "Next" : "Submit"}
</button> </button>