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
: featuredProposal?.id === item.id ? "var(--nl-accent-primary)" : undefined,
background: batchMode
? selectedBatchIds.has(item.id) ? "rgba(90, 140, 255, 0.12)" : undefined
: featuredProposal?.id === item.id ? "rgba(90, 140, 255, 0.12)" : undefined,
? selectedBatchIds.has(item.id) ? "var(--nl-accent-muted)" : undefined
: featuredProposal?.id === item.id ? "var(--nl-accent-muted)" : undefined,
}}
>
<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"
description="Account, preferences, feedback, and session management."
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
</button>
}
@ -97,12 +97,12 @@ export default function SettingsPage() {
{/* Change password */}
<article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<strong>Change password</strong>
{error && <div style={{ color: "var(--nl-danger, #FF6E6E)", fontSize: "var(--nl-fs-sm)" }}>{error}</div>}
{success && <div style={{ color: "#4ADE80", fontSize: "var(--nl-fs-sm)" }}>{success}</div>}
{error && <div style={{ color: "var(--nl-danger)", fontSize: "var(--nl-fs-sm)" }}>{error}</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)" }}>
<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 />
<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"}
</button>
</form>
@ -111,7 +111,7 @@ export default function SettingsPage() {
{/* Danger zone */}
<article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<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
</button>
</article>
@ -188,7 +188,7 @@ MCP API base: ${MCP_SERVER_URL}
<button
onClick={handleSubmitFeedback}
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"}
</button>

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

@ -145,7 +145,7 @@ function WorkspacesPageInner() {
actions={
<div style={{ display: "flex", gap: "var(--nl-space-3)" }}>
<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)}
>
+ Workspace
@ -241,7 +241,7 @@ function WorkspacesPageInner() {
</button>
<button
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
</button>

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

@ -22,13 +22,13 @@ export default function ForgotPasswordPage() {
</p>
{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}
</div>
)}
{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}
</div>
)}
@ -49,7 +49,7 @@ export default function ForgotPasswordPage() {
type="submit"
disabled={isLoading}
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"}
</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>
{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}
</div>
)}
@ -56,7 +56,7 @@ export default function LoginPage() {
type="submit"
disabled={isLoading}
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"}
</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>
{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}
</div>
)}
@ -70,7 +70,7 @@ export default function RegisterPage() {
type="submit"
disabled={isLoading}
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"}
</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 */
/* === 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;
}
@ -45,7 +62,7 @@ button {
.sidebar {
border-right: 1px solid var(--nl-border-default);
background: rgba(12, 17, 31, 0.82);
background: var(--nl-surface-sidebar);
backdrop-filter: blur(16px);
}
@ -57,14 +74,14 @@ button {
.surface-card {
border: 1px solid var(--nl-border-default);
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);
}
.surface-muted {
border: 1px solid var(--nl-border-default);
border-radius: var(--nl-radius-sm);
background: rgba(26, 35, 53, 0.72);
background: var(--nl-surface-muted-translucent);
}
.badge {
@ -73,7 +90,7 @@ button {
gap: 6px;
border-radius: var(--nl-radius-pill);
padding: 6px 10px;
background: rgba(90, 140, 255, 0.14);
background: var(--nl-accent-muted);
color: var(--nl-text-primary);
font-size: var(--nl-fs-sm);
}
@ -82,7 +99,7 @@ button {
width: 100%;
border: 1px solid var(--nl-border-default);
border-radius: var(--nl-radius-sm);
background: rgba(10, 15, 28, 0.88);
background: var(--nl-input-bg);
color: var(--nl-text-primary);
padding: 12px 14px;
}
@ -105,7 +122,7 @@ button {
/* Focus-visible — keyboard accessibility */
*:focus-visible {
outline: 2px solid var(--nl-accent-primary, #5A8CFF);
outline: 2px solid var(--nl-accent-primary);
outline-offset: 2px;
border-radius: 4px;
}
@ -161,15 +178,15 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
overflow-y: auto;
}
.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-toggle {
display: flex; align-items: center; justify-content: center;
position: fixed; top: 12px; left: 12px; z-index: 38;
width: 40px; height: 40px; border-radius: 8px;
border: 1px solid var(--nl-border-default, #2a2a4a);
background: var(--nl-bg-elevated, #12151c);
color: var(--nl-text-primary, #fff);
border: 1px solid var(--nl-border-default);
background: var(--nl-bg-elevated);
color: var(--nl-text-primary);
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 ──────────────────────────────────────── */
.app-layout {
@ -221,7 +225,7 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
background: var(--nl-overlay-scrim);
z-index: 39;
}

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

@ -25,8 +25,8 @@ export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
themeColor: [
{ media: "(prefers-color-scheme: dark)", color: "#06070A" },
{ media: "(prefers-color-scheme: light)", color: "#F8FAFC" },
{ media: "(prefers-color-scheme: dark)", color: "black" },
{ 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() {
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" />
</div>
);

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

@ -14,7 +14,7 @@ export default function HomePage() {
</p>
</div>
<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
</Link>
<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"
toastOptions={{
style: {
background: "var(--nl-surface-card, #121725)",
background: "var(--nl-surface-card)",
border: "1px solid var(--nl-border-default)",
color: "var(--nl-text-primary, #EFF4FF)",
color: "var(--nl-text-primary)",
fontFamily: "var(--nl-font-body)",
},
}}

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

@ -45,7 +45,7 @@ export default function SharedNotePage() {
}, [token]);
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)" }}>
<div className="badge" style={{ marginBottom: 12 }}>
Read-only share · {PRODUCT_NAME}

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

@ -36,7 +36,7 @@ export function AuthGuard({ children }: { children: ReactNode }) {
return (
<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" }}>
<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>
</div>
</div>

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

@ -56,7 +56,7 @@ export function BroadcastBanner() {
alignItems: "center",
justifyContent: "space-between",
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)",
fontSize: "var(--nl-fs-sm)",
}}

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

@ -167,7 +167,7 @@ export function CommandPalette() {
position: "fixed",
inset: 0,
zIndex: 200,
background: "rgba(0,0,0,0.55)",
background: "var(--nl-overlay-scrim-strong)",
display: "grid",
placeItems: "start center",
paddingTop: "12vh",
@ -183,7 +183,7 @@ export function CommandPalette() {
overflow: "hidden",
display: "grid",
gridTemplateRows: "auto 1fr",
boxShadow: "0 24px 80px rgba(0,0,0,0.45)",
boxShadow: "var(--nl-command-shadow)",
}}
onClick={(e) => e.stopPropagation()}
>
@ -219,7 +219,7 @@ export function CommandPalette() {
borderRadius: "var(--nl-radius-md)",
textDecoration: "none",
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",
}}
onMouseEnter={() => setActiveIndex(idx)}

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

@ -65,7 +65,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
style={{
position: "fixed",
inset: 0,
background: "rgba(0,0,0,0.5)",
background: "var(--nl-overlay-scrim)",
display: "flex",
alignItems: "center",
justifyContent: "center",
@ -79,18 +79,18 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
onSubmit={handleSubmit}
className="surface-card"
style={{
padding: "var(--nl-space-6, 1.5rem)",
padding: "var(--nl-space-6)",
width: "100%",
maxWidth: 520,
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>
<select
className="input"
@ -113,7 +113,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
</select>
</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>
<select value={workspaceId} onChange={(e) => setWorkspaceId(e.target.value)} className="input">
{workspaces.map((ws) => (
@ -124,7 +124,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
</select>
</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>
<input
className="input"
@ -136,7 +136,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
/>
</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>
<textarea
className="input"
@ -148,7 +148,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
/>
</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>
<input
className="input"
@ -159,7 +159,7 @@ export function CreateNoteModal({ workspaces, defaultWorkspaceId, onCreated, onC
/>
</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}>
Cancel
</button>

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

@ -37,7 +37,7 @@ export function CreateWorkspaceModal({ onCreated, onClose }: Props) {
return (
<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(); }}
>
<form
@ -47,7 +47,7 @@ export function CreateWorkspaceModal({ onCreated, onClose }: Props) {
>
<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 }}>
<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)" }}>
<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"}
</button>
</div>

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

@ -66,7 +66,7 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
style={{
position: "fixed",
inset: 0,
background: "rgba(0,0,0,0.5)",
background: "var(--nl-overlay-scrim)",
display: "flex",
alignItems: "center",
justifyContent: "center",
@ -79,18 +79,18 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
<div
className="surface-card"
style={{
padding: "var(--nl-space-6, 1.5rem)",
padding: "var(--nl-space-6)",
width: "100%",
maxWidth: 520,
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
className="input"
type="text"
@ -106,33 +106,33 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
</form>
{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 && (
<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) => (
<button
key={note.id}
type="button"
className={selectedId === note.id ? "surface-card" : "surface-muted"}
style={{
padding: "var(--nl-space-3, 0.75rem)",
padding: "var(--nl-space-3)",
textAlign: "left",
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)}
>
<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>
))}
</div>
)}
{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>
<select value={relationshipType} onChange={(e) => setRelationshipType(e.target.value)} className="input">
{RELATIONSHIP_TYPES.map((rt) => (
@ -144,7 +144,7 @@ export function LinkNoteModal({ noteId, workspaceId, existingLinkedIds, onLinked
</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}>
Cancel
</button>

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

@ -21,7 +21,7 @@ const TOOLBAR_BTN: React.CSSProperties = {
const TOOLBAR_BTN_ACTIVE: React.CSSProperties = {
...TOOLBAR_BTN,
background: "rgba(90,140,255,0.18)",
background: "var(--nl-accent-muted-strong)",
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" }}>
<span
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}
</span>

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

@ -62,7 +62,7 @@ export function PromptTemplateEditor({ onClose, onCreated }: PromptTemplateEdito
return (
<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(); }}
role="dialog"
aria-modal="true"

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

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

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

@ -97,7 +97,7 @@ export function ShareDialog({ noteId, workspaceId, noteTitle, onClose }: ShareDi
style={{
position: "fixed",
inset: 0,
background: "rgba(0,0,0,0.5)",
background: "var(--nl-overlay-scrim)",
display: "flex",
alignItems: "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)",
padding: "12px 14px",
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} />

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

@ -80,10 +80,10 @@ export function SurveyBanner() {
if (!started) {
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>
<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>
</div>
</div>
@ -113,7 +113,7 @@ export function SurveyBanner() {
}
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)" }}>
<strong>{question.text}</strong>
<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)",
border: getRatingValue() === n ? "2px solid var(--nl-accent-primary)" : "1px solid var(--nl-border-default)",
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,
}}
>
@ -159,7 +159,7 @@ export function SurveyBanner() {
padding: "4px 12px",
borderRadius: "var(--nl-radius-sm)",
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",
}}
>
@ -174,7 +174,7 @@ export function SurveyBanner() {
<button
onClick={handleNext}
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"}
</button>