@tutti-os/workbench-surface 0.0.44 → 0.0.46

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;
@@ -273,24 +281,51 @@
   transition: background-color 160ms ease;
 }
 
-.workbench-window-traffic-light:hover,
-.workbench-window-traffic-light:focus-visible {
+.workbench-window-traffic-light__icon {
+  position: absolute;
+  z-index: 1;
+  inset: 5px;
+  width: 10px;
+  height: 10px;
+  color: color-mix(in srgb, #000 68%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.workbench-window-traffic-lights:hover .workbench-window-traffic-light,
+.workbench-window-traffic-lights:focus-within .workbench-window-traffic-light {
   opacity: 1;
+}
+
+.workbench-window-traffic-light:focus-visible {
   outline: none;
 }
 
-.workbench-window-traffic-light[data-workbench-traffic-light="close"]:hover::before,
-.workbench-window-traffic-light[data-workbench-traffic-light="close"]:focus-visible::before {
+.workbench-window-traffic-lights:hover .workbench-window-traffic-light__icon,
+.workbench-window-traffic-lights:focus-within
+  .workbench-window-traffic-light__icon {
+  opacity: 1;
+}
+
+.workbench-window-traffic-lights:hover
+  .workbench-window-traffic-light[data-workbench-traffic-light="close"]::before,
+.workbench-window-traffic-lights:focus-within
+  .workbench-window-traffic-light[data-workbench-traffic-light="close"]::before {
   background-color: #ff5f57;
 }
 
-.workbench-window-traffic-light[data-workbench-traffic-light="minimize"]:hover::before,
-.workbench-window-traffic-light[data-workbench-traffic-light="minimize"]:focus-visible::before {
+.workbench-window-traffic-lights:hover
+  .workbench-window-traffic-light[data-workbench-traffic-light="minimize"]::before,
+.workbench-window-traffic-lights:focus-within
+  .workbench-window-traffic-light[data-workbench-traffic-light="minimize"]::before {
   background-color: #ffbd2e;
 }
 
-.workbench-window-traffic-light[data-workbench-traffic-light="maximize"]:hover::before,
-.workbench-window-traffic-light[data-workbench-traffic-light="maximize"]:focus-visible::before {
+.workbench-window-traffic-lights:hover
+  .workbench-window-traffic-light[data-workbench-traffic-light="maximize"]::before,
+.workbench-window-traffic-lights:focus-within
+  .workbench-window-traffic-light[data-workbench-traffic-light="maximize"]::before {
   background-color: #28c840;
 }
 
@@ -470,60 +505,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

@@ -23,6 +23,18 @@ test("traffic lights keep visual layout while expanding the pointer hit area", (
     css,
     /\.workbench-window-traffic-light::before\s*{[^}]*inset:\s*4px;[^}]*content:\s*"";[^}]*transition:\s*background-color 160ms ease;/s
   );
+  assert.match(
+    css,
+    /\.workbench-window-traffic-light__icon\s*{[^}]*inset:\s*5px;[^}]*width:\s*10px;[^}]*height:\s*10px;[^}]*opacity:\s*0;[^}]*transition:\s*opacity 120ms ease;/s
+  );
+  assert.match(
+    css,
+    /\.workbench-window-traffic-lights:hover\s+\.workbench-window-traffic-light__icon,\s*\.workbench-window-traffic-lights:focus-within\s+\.workbench-window-traffic-light__icon\s*{[^}]*opacity:\s*1;/s
+  );
+  assert.match(
+    css,
+    /\.workbench-window-traffic-lights:hover\s+\.workbench-window-traffic-light\[data-workbench-traffic-light="close"\]::before,\s*\.workbench-window-traffic-lights:focus-within\s+\.workbench-window-traffic-light\[data-workbench-traffic-light="close"\]::before\s*{[^}]*background-color:\s*#ff5f57;/s
+  );
 });
 
 test("floating window corner resize handles do not intrude further than the edge handles", () => {
@@ -75,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.44",
+  "version": "0.0.46",
   "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.44",
-    "@tutti-os/ui-react-hooks": "0.0.44",
-    "@tutti-os/workbench-snapshot": "0.0.44",
-    "@tutti-os/ui-system": "0.0.44"
+    "@tutti-os/ui-i18n-runtime": "0.0.46",
+    "@tutti-os/ui-react-hooks": "0.0.46",
+    "@tutti-os/workbench-snapshot": "0.0.46",
+    "@tutti-os/ui-system": "0.0.46"
   },
   "peerDependencies": {
     "react": "^19.1.0",