refactor(ui): use shadow tokens at call sites

Author: Aparencia

app/src/components/AiConversationDock.tsx

@@ -242,7 +242,7 @@ export default function AiConversationDock({
       data-testid="ai-dock"
       style={{
         position: "fixed", top: "var(--ed-nav-h)", right: 0, bottom: 0, width: PANEL_W, zIndex: zIndex("panel"),
-        background: "#fff", borderLeft: "1px solid #e5e7eb", boxShadow: "-8px 0 24px rgba(0,0,0,0.08)",
+        background: "#fff", borderLeft: "1px solid #e5e7eb", boxShadow: "var(--ed-shadow-1)",
         display: open ? "flex" : "none", flexDirection: "column", overflow: "hidden",
         fontSize: 12.5, color: "#1f2937",
       }}

app/src/components/BrowserChrome.tsx

@@ -143,7 +143,7 @@ export default function BrowserChrome() {
         background: "#fff",
         border: "1px solid #e5e7eb",
         borderRadius: 8,
-        boxShadow: "0 8px 24px rgba(0,0,0,0.14)",
+        boxShadow: "var(--ed-shadow-2)",
         padding: 4,
       }}
     >

app/src/components/CanvasNodeConcept.tsx

@@ -27,7 +27,7 @@ export default memo(function CanvasNodeConcept({ data, selected }: NodeProps<Con
         borderRadius: 8,
         border: selected ? "2px solid #14b8a6" : "1px solid #e5e7eb",
         background: selected ? "#f0fdfa" : "#ffffff",
-        boxShadow: "0 1px 4px rgba(0,0,0,0.08)",
+        boxShadow: "var(--ed-shadow-1)",
         padding: 8,
       }}
     >

app/src/components/CanvasNodeModel.tsx

@@ -26,7 +26,7 @@ export default memo(function CanvasNodeModel({ data, selected }: NodeProps<Model
         borderRadius: 8,
         border: selected ? "2px solid #14b8a6" : "1px solid #e5e7eb",
         background: selected ? "#f0fdfa" : "#ffffff",
-        boxShadow: "0 1px 4px rgba(0,0,0,0.08)",
+        boxShadow: "var(--ed-shadow-1)",
         padding: 8,
       }}
     >

app/src/components/CanvasNodeQuestion.tsx

@@ -53,7 +53,7 @@ export default memo(function CanvasNodeQuestion({ data, selected }: NodeProps<Qu
         borderRadius: 8,
         border: selected ? "2px solid #14b8a6" : "1px solid #d1d5db",
         background: selected ? "#f0fdfa" : "#ffffff",
-        boxShadow: "0 1px 4px rgba(0,0,0,0.08)",
+        boxShadow: "var(--ed-shadow-1)",
         padding: 8,
       }}
     >

app/src/components/GroupRowContextMenu.tsx

@@ -93,7 +93,7 @@ export default function GroupRowContextMenu({
           background: "#fff",
           border: "1px solid #e5e7eb",
           borderRadius: 8,
-          boxShadow: "0 8px 24px rgba(0,0,0,0.14)",
+          boxShadow: "var(--ed-shadow-2)",
           padding: 4,
         }}
       >

app/src/components/GroupSidebarRow.tsx

@@ -173,7 +173,7 @@ export default function GroupSidebarRow({
       {colorPickerOpen && (
         <div
           data-testid={`group-color-picker-${group.id}`}
-          style={{ position: "absolute", top: "100%", left: 8, zIndex: zIndex("popover"), background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, boxShadow: "0 4px 12px rgba(0,0,0,0.12)" }}
+          style={{ position: "absolute", top: "100%", left: 8, zIndex: zIndex("popover"), background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, boxShadow: "var(--ed-shadow-1)" }}
         >
           <NoteColorPicker
             value={group.color ?? null}

app/src/components/NoteEditView.tsx

@@ -348,7 +348,7 @@ const NoteEditView = forwardRef<NoteEditHandle, Props>(function NoteEditView({ n
               <div onClick={() => setHighlightOpen(false)} style={{ position: "fixed", inset: 0, zIndex: zIndex("popover"), background: "transparent" }} />
               <div
                 data-testid="highlight-pop"
-                style={{ position: "absolute", top: "100%", left: 0, zIndex: zIndex("popover"), background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, boxShadow: "0 4px 12px rgba(0,0,0,0.12)", maxWidth: 200 }}
+                style={{ position: "absolute", top: "100%", left: 0, zIndex: zIndex("popover"), background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, boxShadow: "var(--ed-shadow-1)", maxWidth: 200 }}
               >
                 <button
                   data-testid="highlight-default"

app/src/components/NoteHeaderActions.tsx

@@ -61,7 +61,7 @@ export default function NoteHeaderActions({
         {colorPickerOpen && (
           <div
             data-testid="note-color-picker-pop"
-            style={{ position: "absolute", top: "100%", right: 0, zIndex: zIndex("popover"), background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, boxShadow: "0 4px 12px rgba(0,0,0,0.12)" }}
+            style={{ position: "absolute", top: "100%", right: 0, zIndex: zIndex("popover"), background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, boxShadow: "var(--ed-shadow-1)" }}
           >
             <NoteColorPicker
               value={parseNoteProperties(note).color ?? null}

app/src/components/NoteLinkToSystem.tsx

@@ -249,7 +249,7 @@ export default function NoteLinkToSystem({ noteId, onChanged, onGotoKnowledgeSys
             style={{
               position: "absolute", zIndex: zIndex("popover"), top: "calc(100% + 6px)", right: 0,
               padding: 10, background: "#fff", border: "1px solid #e5e7eb",
-              borderRadius: 8, boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+              borderRadius: 8, boxShadow: "var(--ed-shadow-2)",
               display: "flex", flexDirection: "column", gap: 6, width: 280,
               maxHeight: 460, overflowY: "auto",
             }}