fix(app): refine start-screen logo (#49475)

packages/app/component-tests/new-session-wordmark.spec.ts

@@ -9,12 +9,17 @@ for (const theme of ["light", "dark"]) {
       const reveal = logo.locator('[data-slot="wordmark-reveal"]')
       const shimmer = logo.locator(".wordmark-shimmer")
       const base = logo.locator("svg").first()
-      await expect(base).toHaveCSS("opacity", theme === "dark" ? "0.5" : "0.6")
+      await expect(base).toHaveCSS("opacity", "0.16")
       await expect(shimmer).toHaveCSS("animation-iteration-count", "1")
       await expect(logo.locator("g[mask]")).toHaveCount(0)
       await expect(shimmer).toHaveCSS("color", "rgb(255, 255, 255)")
       await expect(shimmer).toHaveCSS("mix-blend-mode", "screen")
-      await expect(base.locator("g[fill]")).toHaveAttribute("fill", "currentColor")
+      await expect(base.locator("path").nth(1)).toHaveAttribute("fill", "var(--icon-base)")
+      await expect(base.locator("path").nth(9)).toHaveCSS(
+        "fill",
+        await base.locator("path").nth(1).evaluate((element) => getComputedStyle(element).fill),
+      )
+      await expect(base.locator('path[fill="var(--icon-weak-base)"]')).toHaveCount(8)
 
       await logo.evaluate((element) => {
         element.getAnimations({ subtree: true }).forEach((animation) => {
@@ -77,7 +82,7 @@ for (const theme of ["light", "dark"]) {
     await page.setViewportSize({ width: 360, height: 640 })
     const component = await mount("app-new-session-wordmark--reveal", { globals: { theme } })
     const logo = component.locator('[data-component="new-session-wordmark"]')
-    await expect(logo.locator("svg").first()).toHaveCSS("opacity", theme === "dark" ? "0.5" : "0.6")
+    await expect(logo.locator("svg").first()).toHaveCSS("opacity", "0.16")
     await expect(logo.locator('[data-slot="wordmark-reveal"]')).toHaveCSS("opacity", "1")
     await expect(logo.locator(".wordmark-shimmer")).toHaveCSS("opacity", "0")
     expect(await logo.evaluate((element) => element.getAnimations({ subtree: true }).length)).toBe(0)

packages/app/src/new-session/wordmark.css

@@ -1,7 +1,12 @@
 [data-component="new-session-wordmark"] {
+  --icon-strong-base: var(--icon-base);
   --wordmark-shimmer-opacity: 0.45;
 
   .wordmark-shimmer {
+    --icon-base: white;
+    --icon-strong-base: white;
+    --icon-weak-base: transparent;
+
     /* Blend above the base logo's opacity so the sweep only adds light in either theme. */
     color: white;
     mix-blend-mode: screen;
@@ -13,6 +18,10 @@
   }
 }
 
+[data-color-scheme="light"] [data-component="new-session-wordmark"] {
+  --icon-weak-base: color-mix(in srgb, var(--icon-base) 30%, transparent);
+}
+
 [data-color-scheme="dark"] [data-component="new-session-wordmark"] {
   /* Preserve the previous dark highlight strength: 0.16 × 0.7 × 0.6. */
   --wordmark-shimmer-opacity: 0.0672;

packages/app/src/new-session/wordmark.tsx

@@ -1,4 +1,4 @@
-import { Wordmark } from "@opencode/ui/wordmark"
+import { Logo } from "@opencode/ui/logo"
 import "./wordmark.css"
 
 export function NewSessionWordmark() {
@@ -8,9 +8,9 @@ export function NewSessionWordmark() {
       aria-hidden="true"
       class="pointer-events-none mx-auto w-full max-w-[720px] text-v2-background-bg-inverse"
     >
-      <div data-slot="wordmark-reveal" class="relative">
-        <Wordmark fade={false} class="block h-auto w-full opacity-60 [[data-color-scheme=dark]_&]:opacity-50" />
-        <Wordmark fade={false} muted={false} class="wordmark-shimmer absolute inset-0 h-auto w-full" />
+      <div data-slot="wordmark-reveal" class="relative mx-auto w-4/5">
+        <Logo class="block aspect-[720/129] w-full opacity-[0.16]" />
+        <Logo class="wordmark-shimmer absolute inset-0 aspect-[720/129] w-full" />
       </div>
     </div>
   )

packages/desktop/src/renderer/startup/splash.tsx

@@ -73,12 +73,14 @@ export function LoadingSplash(props: {
       >
         <div class="relative size-full">
           <div class="absolute inset-x-0 top-[25.375%]">
-            <Wordmark
-              outline
-              fade={false}
-              muted={false}
-              class="mx-auto block h-auto w-full max-w-[720px] text-v2-icon-icon-faint opacity-50"
-            />
+            <div class="mx-auto w-full max-w-[720px]">
+              <Wordmark
+                outline
+                fade={false}
+                muted={false}
+                class="mx-auto block h-auto w-4/5 text-v2-icon-icon-faint opacity-50"
+              />
+            </div>
           </div>
         </div>
       </div>