fix(macos): adapt Codex 26.810 theme surfaces

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.1.2 — 2026-08-17
+
+- Added Codex 26.810 compatibility for its renamed Home fade, project utility,
+  and task composer footer surfaces.
+- Matched Home and task brightness by removing the task-wide dimming layer and
+  keeping both composers on one 54% / 18px glass surface.
+- Removed the hidden 153px sticky footer compositing layer that could render as
+  a large black rectangle above the task composer.
+- Strengthened live verification for effective surface opacity, nested native
+  blur and shadow layers, Home toolbar styling, and zero-sized footer gradients.
+
 ## 0.1.1 — 2026-08-16
 
 - Restored themed composer glass on Codex 26.803 by clearing its new opaque

VERSION

@@ -1 +1 @@
-0.1.1
+0.1.2

engine/assets/ai-themestore.css

@@ -20,6 +20,8 @@
   --ds-card-surface-mix: 50%;
   --ds-workspace-surface-mix: 54%;
   --ds-composer-surface-mix: 54%;
+  --ds-task-surface-mix: 0%;
+  --ds-task-composer-surface-mix: 54%;
   --ds-control-surface-blur: 18px;
   --ds-sidebar-surface-mix: 50%;
   --ds-sidebar-surface-blur: 0px;
@@ -457,11 +459,20 @@ html.ai-themestore .ai-themestore-composer-surface {
   overflow: visible !important;
 }
 
+/* Keep task and Home composers on the same single 54% glass layer. */
+html.ai-themestore[data-themestore-shell="dark"]
+  main.main-surface:not(.ai-themestore-home-shell)
+  .ai-themestore-composer-surface {
+  background: color-mix(in srgb, var(--ds-panel) var(--ds-task-composer-surface-mix), transparent) !important;
+}
+
 /* Codex 26.803 can paint an opaque layout body inside the semantic composer
    surface. Keep the native controls live while letting the themed glass show. */
 html.ai-themestore .ai-themestore-composer-surface > [data-composer-layout] {
   background-color: transparent !important;
   background-image: none !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
 }
 
 html.ai-themestore main.main-surface:not(.ai-themestore-home-shell)
@@ -592,7 +603,8 @@ html.ai-themestore[data-themestore-mark-style="none"] .ai-themestore-composer-su
   display: none;
 }
 
-.ai-themestore-home div:has(> .horizontal-scroll-fade-mask .group\/project-selector) {
+.ai-themestore-home div:has(> .horizontal-scroll-fade-mask .group\/project-selector),
+.ai-themestore-home .ai-themestore-project-utility {
   position: relative;
   border: 1px solid color-mix(in srgb, var(--ds-cyan) 18%, transparent);
   border-bottom: 0;
@@ -603,7 +615,8 @@ html.ai-themestore[data-themestore-mark-style="none"] .ai-themestore-composer-su
   backdrop-filter: blur(var(--ds-control-surface-blur)) saturate(112%) !important;
 }
 
-.ai-themestore-home div:has(> .horizontal-scroll-fade-mask .group\/project-selector)::before {
+.ai-themestore-home div:has(> .horizontal-scroll-fade-mask .group\/project-selector)::before,
+.ai-themestore-home .ai-themestore-project-utility::before {
   content: none !important;
 }
 
@@ -623,7 +636,8 @@ html.ai-themestore[data-themestore-mark-style="none"] .ai-themestore-composer-su
   user-select: none;
 }
 
-.ai-themestore-home div:has(> .horizontal-scroll-fade-mask .group\/project-selector)::after {
+.ai-themestore-home div:has(> .horizontal-scroll-fade-mask .group\/project-selector)::after,
+.ai-themestore-home .ai-themestore-project-utility::after {
   content: "";
   position: absolute;
   left: 0;
@@ -819,7 +833,7 @@ html.ai-themestore[data-themestore-background="full"] main.main-surface {
 }
 
 html.ai-themestore[data-themestore-background="full"] main.main-surface:not(.ai-themestore-home-shell) {
-  background: color-mix(in srgb, var(--ds-panel) var(--ds-sidebar-surface-mix), transparent) !important;
+  background: color-mix(in srgb, var(--ds-panel) var(--ds-task-surface-mix), transparent) !important;
   backdrop-filter: blur(var(--ds-sidebar-surface-blur)) saturate(112%) !important;
 }
 
@@ -860,6 +874,19 @@ html.ai-themestore[data-themestore-background="full"]
 html.ai-themestore[data-themestore-background="full"]
   main.main-surface:not(.ai-themestore-home-shell)
   [class~="bg-gradient-to-t"][class~="from-token-main-surface-primary"] {
+  display: none !important;
+  background-image: none !important;
+  background-clip: border-box !important;
+  clip-path: none !important;
+}
+
+/* Codex 26.810 renamed the task composer footer gradient tokens. Even after
+   clearing its image, the 153px sticky backdrop layer can composite as an
+   opaque black rectangle, so remove the layer itself. */
+html.ai-themestore[data-themestore-background="full"]
+  main.main-surface:not(.ai-themestore-home-shell)
+  [class~="bg-gradient-to-t"][class~="from-surface"][class~="via-surface"] {
+  display: none !important;
   background-image: none !important;
   background-clip: border-box !important;
   clip-path: none !important;
@@ -893,6 +920,27 @@ html.ai-themestore[data-themestore-background="full"][data-themestore-sidebar-fr
   backdrop-filter: none !important;
 }
 
+/* Keep the artwork continuous across the native app header boundary and match
+   the transparent task main surface. */
+html.ai-themestore[data-themestore-background="full"] main.main-surface.ai-themestore-home-shell,
+html.ai-themestore[data-themestore-shell="light"][data-themestore-background="full"] main.main-surface.ai-themestore-home-shell {
+  background-color: transparent !important;
+  background-image: none !important;
+  backdrop-filter: none !important;
+}
+
+/* Codex 26.810 adds a native 24px top fade at the content-frame boundary.
+   It is useful on opaque pages but cuts a dark horizontal band through Home's
+   continuous wallpaper, so disable only the renderer-marked Home instance. */
+html.ai-themestore[data-themestore-background="full"]
+  main.main-surface.ai-themestore-home-shell
+  .ai-themestore-home-top-fade {
+  background-color: transparent !important;
+  background-image: none !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
 html.ai-themestore[data-themestore-background="full"] main.main-surface > header.app-header-tint {
   background: color-mix(in srgb, var(--ds-panel) 68%, transparent) !important;
   backdrop-filter: blur(calc(var(--ds-blur) + 2px)) saturate(112%) !important;

engine/assets/renderer-inject.js

@@ -476,16 +476,28 @@
         controls?.classList.add("ai-themestore-home-controls");
       }
     }
+    const homeTopFadeClass = "ai-themestore-home-top-fade";
+    for (const candidate of document.querySelectorAll(`.${homeTopFadeClass}`)) {
+      candidate.classList.remove(homeTopFadeClass);
+    }
+    if (home && shellMain) {
+      shellMain.querySelector('[class*="_MainContentTopFade_"]')?.classList.add(homeTopFadeClass);
+    }
     for (const hint of document.querySelectorAll(".ai-themestore-project-hint")) {
       if (!home?.contains(hint)) hint.remove();
     }
+    const projectUtilityClass = "ai-themestore-project-utility";
+    for (const candidate of document.querySelectorAll(`.${projectUtilityClass}`)) {
+      candidate.classList.remove(projectUtilityClass);
+    }
     if (home) {
       for (const scrollArea of home.querySelectorAll("[data-composer-utility-bar-scroll-area]")) {
         const projectSelector = scrollArea.querySelector(".group\\/project-selector") ??
           scrollArea.querySelector('[data-composer-navigation-target="workspace-project"]');
         if (!projectSelector) continue;
         const utilityBar = scrollArea.parentElement;
         if (!utilityBar) continue;
+        utilityBar.classList.add(projectUtilityClass);
         let hint = utilityBar.querySelector(":scope > .ai-themestore-project-hint");
         if (!hint) {
           hint = document.createElement("span");
@@ -576,6 +588,7 @@
     for (const name of THEME_VARIABLES) document.documentElement?.style.removeProperty(name);
     document.querySelectorAll(".ai-themestore-home").forEach((node) => node.classList.remove("ai-themestore-home"));
     document.querySelectorAll(".ai-themestore-home-shell").forEach((node) => node.classList.remove("ai-themestore-home-shell"));
+    document.querySelectorAll(".ai-themestore-home-top-fade").forEach((node) => node.classList.remove("ai-themestore-home-top-fade"));
     document.querySelectorAll(".ai-themestore-chat-pane").forEach((node) => node.classList.remove("ai-themestore-chat-pane"));
     document.querySelectorAll(".ai-themestore-tool-pane").forEach((node) => node.classList.remove("ai-themestore-tool-pane"));
     document.querySelectorAll(`.${COMPOSER_SURFACE_CLASS}`).forEach((node) => {
@@ -604,6 +617,9 @@
       ".ai-themestore-composer-signature, .ai-themestore-composer-quote, " +
       ".ai-themestore-composer-orbit, .ai-themestore-project-hint",
     ).forEach((node) => node.remove());
+    document.querySelectorAll(".ai-themestore-project-utility").forEach((node) => {
+      node.classList.remove("ai-themestore-project-utility");
+    });
     document.getElementById(STYLE_ID)?.remove();
     document.getElementById(CHROME_ID)?.remove();
     const motionVideo = document.getElementById(VIDEO_ID);

engine/scripts/codex-shell-probe.mjs

@@ -38,6 +38,31 @@ export function resolveShellMainDocument(documentRef) {
 export const SHELL_MAIN_RESOLVER_EXPRESSION =
   `(${resolveShellMainDocument.toString()})(document)`;
 
+export function shellMainCoveragePass({
+  visible,
+  homeRoute,
+  backgroundAlpha,
+  backgroundImage,
+}) {
+  if (!visible || backgroundAlpha == null) return false;
+  return backgroundAlpha <= 0.035 &&
+    (backgroundImage === "none" || backgroundImage === null);
+}
+
+export const SHELL_MAIN_COVERAGE_EXPRESSION =
+  `(${shellMainCoveragePass.toString()})`;
+
+export function compositedSurfaceAlpha(backdropAlpha, foregroundAlpha) {
+  if (!Number.isFinite(backdropAlpha) || !Number.isFinite(foregroundAlpha)) return null;
+  if (backdropAlpha < 0 || backdropAlpha > 1 || foregroundAlpha < 0 || foregroundAlpha > 1) {
+    return null;
+  }
+  return backdropAlpha + foregroundAlpha * (1 - backdropAlpha);
+}
+
+export const COMPOSITED_SURFACE_ALPHA_EXPRESSION =
+  `(${compositedSurfaceAlpha.toString()})`;
+
 export function resolveToolPaneDocument(documentRef) {
   return documentRef.querySelector(
     'aside[data-app-shell-focus-area="right-panel"]',
@@ -65,12 +90,41 @@ export const COMPOSER_SURFACE_RESOLVER_EXPRESSION =
 export function composerNativeLayerCoveragePass(layers) {
   return layers.every((layer) =>
     layer.backgroundAlpha <= 0.035 &&
-    (layer.backgroundImage === "none" || layer.backgroundImage === null));
+    (layer.backgroundImage === "none" || layer.backgroundImage === null) &&
+    (layer.backdropFilter === "none" || layer.backdropFilter === null) &&
+    (layer.boxShadow === "none" || layer.boxShadow === null));
 }
 
 export const COMPOSER_NATIVE_LAYER_COVERAGE_EXPRESSION =
   `(${composerNativeLayerCoveragePass.toString()})`;
 
+export function homeTopFadeCoveragePass({ homeRoute, present, backgroundImage, backdropFilter, boxShadow }) {
+  if (!homeRoute || !present) return true;
+  return (backgroundImage === "none" || backgroundImage === null) &&
+    (backdropFilter === "none" || backdropFilter === null) &&
+    (boxShadow === "none" || boxShadow === null);
+}
+
+export const HOME_TOP_FADE_COVERAGE_EXPRESSION =
+  `(${homeTopFadeCoveragePass.toString()})`;
+
+export function workspaceSurfaceCoveragePass({
+  homeRoute,
+  present,
+  backgroundAlpha,
+  backdropFilter,
+}) {
+  if (!homeRoute) return true;
+  return Boolean(
+    present && backgroundAlpha != null &&
+    backgroundAlpha >= 0.505 && backgroundAlpha <= 0.575 &&
+    backdropFilter?.includes("blur(18px)"),
+  );
+}
+
+export const WORKSPACE_SURFACE_COVERAGE_EXPRESSION =
+  `(${workspaceSurfaceCoveragePass.toString()})`;
+
 export function resolveChatPaneDocument(documentRef) {
   const marked = documentRef.querySelector("aside.ai-themestore-chat-pane");
   if (marked) return marked;