@tutti-os/workbench-surface 0.0.45 → 0.0.47

package/dist/styles/workbench.css

@@ -14,6 +14,7 @@
 }
 
 .workbench-surface {
+  --workbench-chrome-active-foreground: var(--foreground);
   --workbench-chrome-inset-x: 0px;
   --workbench-chrome-inset-y: 0px;
   --workbench-mission-control-ease: cubic-bezier(0.22, 1, 0.36, 1);
@@ -34,6 +35,13 @@
   isolation: isolate;
 }
 
+.workbench-surface[data-mission-control-phase="entering"],
+.workbench-surface[data-mission-control-phase="open"],
+.workbench-surface[data-presentation-mode="mission-control"] {
+  --workbench-chrome-active-foreground: var(--white-stationary);
+  --workbench-chrome-foreground: var(--white-stationary);
+}
+
 .workbench-surface__wallpaper {
   position: absolute;
   inset: 0;
@@ -217,6 +225,12 @@
   user-select: auto;
 }
 
+.workbench-window__header--custom:has(
+  [data-workbench-custom-header-border="none"]
+) {
+  border-bottom-color: transparent;
+}
+
 .workbench-window__header--custom:active {
   cursor: default;
 }
@@ -497,60 +511,24 @@
     transform var(--workbench-mission-control-scale-duration)
       var(--workbench-mission-control-ease);
   will-change: opacity, transform;
-  background:
-    radial-gradient(
-      110% 92% at 50% -4%,
-      rgb(255 255 255 / 0.14) 0%,
-      transparent 56%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(
-          in srgb,
-          var(--workbench-surface-background) 54%,
-          rgb(255 255 255 / 10%)
-        )
-        0%,
-      color-mix(in srgb, var(--workbench-window-bg) 82%, var(--workbench-panel))
-        100%
-    );
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
+  background: rgb(0 0 0 / 60%);
+  box-shadow: none;
 }
 
 .workbench-mission-control-backdrop::before {
   position: absolute;
   inset: 0;
-  background:
-    linear-gradient(135deg, rgb(255 255 255 / 0.06), transparent 34%),
-    radial-gradient(
-      92% 84% at 18% 18%,
-      color-mix(in srgb, var(--workbench-panel) 22%, transparent) 0%,
-      transparent 48%
-    ),
-    radial-gradient(
-      68% 54% at 82% 10%,
-      rgb(255 255 255 / 0.07),
-      transparent 44%
-    ),
-    repeating-linear-gradient(
-      180deg,
-      rgb(255 255 255 / 0.018) 0,
-      rgb(255 255 255 / 0.018) 1px,
-      transparent 1px,
-      transparent 4px
-    );
+  background: none;
   content: "";
-  opacity: 0.92;
+  opacity: 0;
 }
 
 .workbench-mission-control-backdrop::after {
   position: absolute;
   inset: 0;
-  background:
-    linear-gradient(180deg, rgb(255 255 255 / 0.045), transparent 26%),
-    linear-gradient(0deg, rgb(255 255 255 / 0.025), transparent 36%);
+  background: none;
   content: "";
-  opacity: 0.76;
+  opacity: 0;
 }
 
 .workbench-mission-control-backdrop[data-phase="entering"],

package/dist/styles/workbenchStyle.test.ts

@@ -87,6 +87,35 @@ test("mission control overlay lets layout controls sit above dialog overlays", (
   );
 });
 
+test("mission control backdrop uses the shared dark scrim value", () => {
+  const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
+
+  assert.match(
+    css,
+    /\.workbench-surface\s*{[^}]*--workbench-chrome-active-foreground:\s*var\(--foreground\);/s
+  );
+  assert.match(
+    css,
+    /\.workbench-surface\[data-mission-control-phase="entering"\],[\s\S]*?\.workbench-surface\[data-presentation-mode="mission-control"\]\s*{[^}]*--workbench-chrome-active-foreground:\s*var\(--white-stationary\);[^}]*--workbench-chrome-foreground:\s*var\(--white-stationary\);/s
+  );
+  assert.match(
+    css,
+    /\.workbench-mission-control-backdrop\s*{[^}]*background:\s*rgb\(0 0 0 \/ 60%\);[^}]*box-shadow:\s*none;/s
+  );
+  assert.match(
+    css,
+    /\.workbench-mission-control-backdrop::before\s*{[^}]*background:\s*none;[^}]*opacity:\s*0;/s
+  );
+  assert.match(
+    css,
+    /\.workbench-mission-control-backdrop::after\s*{[^}]*background:\s*none;[^}]*opacity:\s*0;/s
+  );
+  assert.doesNotMatch(
+    css,
+    /\.workbench-mission-control-backdrop\s*{[^}]*var\(--workbench-surface-background\)/s
+  );
+});
+
 test("dialog popover node layer sits above dialog overlays and remains clickable", () => {
   const css = readFileSync(resolve("src/styles/workbench.css"), "utf8");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutti-os/workbench-surface",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "private": false,
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -34,10 +34,10 @@
     "@tutti-os/config-tsconfig": "0.0.0"
   },
   "dependencies": {
-    "@tutti-os/ui-i18n-runtime": "0.0.45",
-    "@tutti-os/ui-react-hooks": "0.0.45",
-    "@tutti-os/workbench-snapshot": "0.0.45",
-    "@tutti-os/ui-system": "0.0.45"
+    "@tutti-os/ui-i18n-runtime": "0.0.47",
+    "@tutti-os/ui-react-hooks": "0.0.47",
+    "@tutti-os/workbench-snapshot": "0.0.47",
+    "@tutti-os/ui-system": "0.0.47"
   },
   "peerDependencies": {
     "react": "^19.1.0",