fix(desktop): tint the native frame lightly so macOS vibrancy shows through

macOS already draws the blurred desktop beneath the view; painting the 84%
--frame-glass tint on top made the rail read as solid. The native frame now
adds only the place tint at --frame-native-tint; the browser fallback keeps
--frame-glass with its CSS blur.

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

Author: santoshkumarradha

desktop/src/design/tokens.json

@@ -1247,6 +1247,7 @@
     "overturn-button-size": "var(--why-button-size)",
     "overturn-button-weight": "var(--why-button-weight)",
     "frame-blur": "40px",
+    "frame-native-tint": "38%",
     "frame-saturate": "1.4",
     "search-field-gap": "10px",
     "search-field-size": "13px",

desktop/src/styles/material.css

@@ -2,7 +2,9 @@
    browsers blur only chrome so opaque content never samples a second blur. */
 .app-shell { background: var(--frame); }
 :root[data-material="native"] body { background: transparent; }
-:root[data-material="native"] .app-shell { background: var(--frame-glass); backdrop-filter: none; }
+/* macOS already draws the blurred desktop beneath the view, so the native frame adds only the place tint at a light
+   weight. The heavier --frame-glass tint is for the browser fallback, where CSS blur is the only material. */
+:root[data-material="native"] .app-shell { background: color-mix(in oklch, var(--frame) var(--frame-native-tint), transparent); backdrop-filter: none; }
 :root[data-material="native"] .app-shell :is(.sidebar, .workspace-tabbar, .content-toolbar) { background: transparent; backdrop-filter: none; }
 :root[data-material="glass"] .app-shell { background: transparent; backdrop-filter: none; }
 :root[data-material="glass"] .app-shell :is(.sidebar, .workspace-tabbar, .content-toolbar) {

desktop/src/styles/tokens.css

@@ -1248,6 +1248,7 @@
   --overturn-button-size: var(--why-button-size);
   --overturn-button-weight: var(--why-button-weight);
   --frame-blur: 40px;
+  --frame-native-tint: 38%;
   --frame-saturate: 1.4;
   --search-field-gap: 10px;
   --search-field-size: 13px;