Give the right-click menu the darkest surface and Oxide's selection

The menu now sits on the darkest surface (the frame color) behind a faint
border, and its highlighted item takes Oxide's selected style: a dark green
fill (their surface-accent) with green text. Mouse and keyboard share that
one highlight, so a hovered row and a keyboard-selected row can no longer
light up at the same time.

Co-Authored-By: Claude <noreply@anthropic.com>

ui/src/app/skins/shadlike/context-menu.ts

@@ -43,11 +43,11 @@ const EDGE_GAP = 6; // px on purpose: a viewport-edge margin, not a UI size
         (keydown)="onKeydown($event)"
         [style.left.px]="position().x"
         [style.top.px]="position().y"
-        class="fixed z-50 w-56 border border-border bg-card py-1 text-card-foreground shadow-xl outline-none"
+        class="fixed z-50 w-56 border border-border/60 bg-chrome py-1 text-foreground shadow-xl outline-none"
       >
         @for (item of req.items; track $index) {
           @if (item.type === 'separator') {
-            <div class="my-1 border-t border-border"></div>
+            <div class="my-1 border-t border-border/60"></div>
           } @else {
             <button
               type="button"
@@ -55,10 +55,11 @@ const EDGE_GAP = 6; // px on purpose: a viewport-edge margin, not a UI size
               [attr.id]="'ctx-item-' + $index"
               [title]="item.tooltip ?? ''"
               [disabled]="!!item.disabled"
-              [class.bg-accent]="$index === activeIndex() && !item.disabled"
+              [class.bg-primary-surface]="$index === activeIndex() && !item.disabled"
+              [class.text-primary]="$index === activeIndex() && !item.disabled"
               (mouseenter)="activeIndex.set($index)"
               (click)="pick(item)"
-              class="flex w-full items-center gap-2 px-3 py-1 text-left text-(length:--path-font) hover:bg-accent disabled:pointer-events-none disabled:opacity-50"
+              class="flex w-full items-center gap-2 px-3 py-1 text-left text-(length:--path-font) disabled:pointer-events-none disabled:opacity-50"
             >
               <span class="w-3.5 shrink-0">
                 @if (item.checked) {

ui/src/styles.css

@@ -27,6 +27,8 @@
   --card-foreground: oklch(0.162 0.01 260);
   --primary: oklch(0.474 0.1481 173.7); /* green-500 */
   --primary-foreground: oklch(0.995 0.0001 260);
+  /* Oxide's surface-accent: the fill of a selected/highlighted item (green-1200) */
+  --primary-surface: oklch(0.922 0.0586 163.7);
   --muted: oklch(0.95 0.0001 260); /* n1100 */
   --muted-foreground: oklch(0.483 0.0041 260); /* n500 */
   --accent: oklch(0.162 0.01 260 / 5%);
@@ -69,6 +71,7 @@
   --card-foreground: oklch(0.9 0.0001 260);
   --primary: oklch(0.77 0.1919 163.7); /* green-800 */
   --primary-foreground: oklch(0.162 0.01 260);
+  --primary-surface: oklch(0.24 0.0722 183.7); /* green-200 */
   --muted: oklch(0.316 0.006 260); /* n300 */
   --muted-foreground: oklch(0.717 0.0021 260); /* n700 */
   --accent: oklch(1 0 0 / 7%);
@@ -98,6 +101,7 @@
     --card-foreground: oklch(0.9 0.0001 260);
     --primary: oklch(0.77 0.1919 163.7);
     --primary-foreground: oklch(0.162 0.01 260);
+    --primary-surface: oklch(0.24 0.0722 183.7);
     --muted: oklch(0.316 0.006 260);
     --muted-foreground: oklch(0.717 0.0021 260);
     --accent: oklch(1 0 0 / 7%);
@@ -158,6 +162,7 @@
   --color-card-foreground: var(--card-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-primary-surface: var(--primary-surface);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);