[shared-ui] Update default app theme (#5639)

Author: paullewis

.changeset/pretty-wolves-enter.md

@@ -0,0 +1,10 @@
+---
+"@breadboard-ai/unified-server": patch
+"@breadboard-ai/visual-editor": patch
+"@google-labs/breadboard": patch
+"@breadboard-ai/shared-ui": patch
+"@google-labs/breadboard-schema": patch
+"@breadboard-ai/types": patch
+---
+
+Update default app theme

packages/board-server/src/server/storage-providers/inmemory.test.ts

@@ -42,7 +42,7 @@ suite("In-memory storage provider", () => {
       tags: [],
       thumbnail: "",
       graph: {
-        description: "",
+        description: "Add a description",
         edges: [],
         nodes: [],
         title: "Untitled Flow",
@@ -75,8 +75,8 @@ suite("In-memory storage provider", () => {
 
   test("upsert board", async () => {
     const board: StorageBoard = {
-      name: '',  // Explicitly no name - new board.
-      owner: '',
+      name: "", // Explicitly no name - new board.
+      owner: "",
       displayName: "Test Board",
       description: "Board For Testing",
       tags: ["published"],
@@ -88,7 +88,7 @@ suite("In-memory storage provider", () => {
     assert.notEqual(created.name, ""); // The result must have a name assigned.
     board.name = created.name;
     assert.deepEqual(created, board);
-    board.description = 'updated';
+    board.description = "updated";
     const updated = await provider.upsertBoard(board);
     assert.deepEqual(updated, board);
   });

packages/board-server/src/server/storage-providers/inmemory.ts

@@ -42,7 +42,7 @@ export class InMemoryStorageProvider implements BoardServerStore {
   async createBoard(userId: string, name: string): Promise<void> {
     this.#boards[name] = {
       name,
-    owner: userId,
+      owner: userId,
       displayName: name,
       description: "",
       tags: [],
@@ -56,7 +56,10 @@ export class InMemoryStorageProvider implements BoardServerStore {
   }
 
   async upsertBoard(board: Readonly<StorageBoard>): Promise<StorageBoard> {
-    const updatedBoard: StorageBoard = {...board, name: board.name || crypto.randomUUID()};
+    const updatedBoard: StorageBoard = {
+      ...board,
+      name: board.name || crypto.randomUUID(),
+    };
     this.#boards[updatedBoard.name] = updatedBoard;
     return updatedBoard;
   }

packages/breadboard/src/editor/blank.ts

@@ -28,15 +28,15 @@ const llmContentConfig = (type: string) => ({
 
 const BLANK_GRAPH: GraphDescriptor = {
   title: "Untitled Flow",
-  description: "",
+  description: "Add a description",
   version: "0.0.1",
   nodes: [],
   edges: [],
 };
 
 const BLANK_LLM_CONTENT_GRAPH: GraphDescriptor = {
   title: "Untitled Flow",
-  description: "",
+  description: "Add a description",
   version: "0.0.1",
   nodes: [
     { type: "input", id: "input", configuration: llmContentConfig("input") },

packages/manifest/bbm.schema.json

@@ -639,6 +639,9 @@
 		"GraphTheme": {
 			"additionalProperties": false,
 			"properties": {
+				"isDefaultTheme": {
+					"type": "boolean"
+				},
 				"splashScreen": {
 					"$ref": "#/definitions/StoredDataCapabilityPart"
 				},

packages/schema/breadboard.schema.json

@@ -570,6 +570,9 @@
 				},
 				"splashScreen": {
 					"$ref": "#/definitions/StoredDataCapabilityPart"
+				},
+				"isDefaultTheme": {
+					"type": "boolean"
 				}
 			},
 			"additionalProperties": false

packages/shared-ui/src/app-templates/basic/index.ts

@@ -272,10 +272,10 @@ export class Template extends LitElement implements AppTemplate {
 
             &::before {
               content: "";
-              width: 100%;
+              width: var(--splash-width, 100%);
               flex: 1;
-              background: var(--splash-image, url(/images/app/generic-flow.jpg))
-                center center / cover no-repeat;
+              background: var(--splash-image, var(--bb-logo)) center center /
+                var(--splash-fill, cover) no-repeat;
               mask-image: linear-gradient(
                 to bottom,
                 rgba(255, 0, 255, 1) 0%,
@@ -289,8 +289,8 @@ export class Template extends LitElement implements AppTemplate {
             & h1 {
               background: var(--background-color, none);
               border-radius: var(--bb-grid-size-2);
-              font: 500 var(--font-style) 32px / 42px var(--font-family);
-              color: var(--primary-color, var(--bb-neutral-700));
+              font: 400 var(--font-style) 32px / 42px var(--font-family);
+              color: var(--text-color, var(--bb-neutral-700));
               margin: 0 0 var(--bb-grid-size-3);
               flex: 0 0 auto;
               max-width: 80%;
@@ -568,7 +568,8 @@ export class Template extends LitElement implements AppTemplate {
                 var(--bb-icon-generative) 12px center / 16px 16px no-repeat;
               color: var(--primary-text-color, var(--bb-ui-700));
               border-radius: 20px;
-              border: 1px solid var(--primary-color, var(--bb-ui-100));
+              border: 1px solid
+                var(--start-border, var(--primary-color, var(--bb-ui-100)));
               font: 400 var(--bb-label-large) /
                 var(--bb-label-line-height-large) var(--bb-font-family);
               padding: 0 var(--bb-grid-size-5) 0 var(--bb-grid-size-9);
@@ -1339,6 +1340,14 @@ export class Template extends LitElement implements AppTemplate {
     }
 
     if (typeof this.options.splashImage === "string") {
+      // Special-case the default theme based on the mime types.
+      // TODO: Replace this with a more robust check.
+      if (this.options.isDefaultTheme) {
+        styles["--splash-width"] = "50%";
+        styles["--splash-fill"] = "contain";
+        styles["--start-border"] = "var(--secondary-color)";
+      }
+
       styles["--splash-image"] = this.options.splashImage;
     }
 

packages/shared-ui/src/elements/app-preview/app-preview.ts

@@ -28,14 +28,13 @@ import {
   STATUS,
   TopGraphRunResult,
 } from "../../types/types.js";
-import { getGlobalColor } from "../../utils/color.js";
 import { classMap } from "lit/directives/class-map.js";
 
-const primaryColor = getGlobalColor("--bb-ui-700");
-const secondaryColor = getGlobalColor("--bb-ui-400");
-const backgroundColor = getGlobalColor("--bb-neutral-0");
-const textColor = getGlobalColor("--bb-neutral-900");
-const primaryTextColor = getGlobalColor("--bb-neutral-0");
+const primaryColor = "#ffffff";
+const secondaryColor = "#7a7a7a";
+const backgroundColor = "#ffffff";
+const textColor = "#1a1a1a";
+const primaryTextColor = "#1a1a1a";
 
 /**
  * Based on https://www.w3.org/TR/AERT/#color-contrast
@@ -164,6 +163,7 @@ export class AppPreview extends LitElement {
       const { themes, theme } = this.graph.metadata.visual.presentation;
       if (themes[theme]) {
         templateAdditionalOptions = themes[theme].templateAdditionalOptions;
+        options.isDefaultTheme = themes[theme].isDefaultTheme;
       }
     } else if (
       this.graph?.metadata?.visual?.presentation?.templateAdditionalOptions

packages/shared-ui/src/elements/app-preview/app-theme-creator.ts

@@ -251,6 +251,10 @@ export class AppThemeCreator extends LitElement {
                 background: url(/images/progress-ui.svg) center center / 20px
                   20px no-repeat;
                 border-radius: var(--bb-grid-size-2) var(--bb-grid-size-2) 0 0;
+
+                &.default {
+                  object-fit: contain;
+                }
               }
 
               & .color {
@@ -661,6 +665,9 @@ export class AppThemeCreator extends LitElement {
                   <img
                     src=${url ?? "/images/app/generic-flow.jpg"}
                     alt="Theme thumbnail"
+                    class=${classMap({
+                      default: theme.isDefaultTheme ?? false,
+                    })}
                   />
                   <span
                     class="color"

packages/shared-ui/src/elements/welcome-panel/gallery.ts

@@ -97,6 +97,13 @@ export class Gallery extends LitElement {
         border-bottom: var(--border);
         /* Matches the color of the placeholder background */
         background-color: #ebf5ff;
+
+        &.default {
+          background-color: var(--bb-neutral-0);
+          object-fit: contain;
+          box-sizing: border-box;
+          padding: var(--bb-grid-size-8);
+        }
       }
 
       .details {
@@ -367,6 +374,9 @@ export class Gallery extends LitElement {
 
   #renderBoard([name, item]: [string, GraphProviderItem]) {
     const { url, mine, title, description, thumbnail } = item;
+    // TODO: Replace this with a more robust check. The theme does include this
+    // information but the board server logic doesn't currently expose it.
+    const isDefaultTheme = thumbnail?.startsWith("data:") ?? false;
     return html`
       <div
         aria-role="button"
@@ -378,7 +388,7 @@ export class Gallery extends LitElement {
         ${keyed(
           thumbnail,
           html`<img
-            class="thumbnail"
+            class=${classMap({ thumbnail: true, default: isDefaultTheme })}
             src=${thumbnail ?? "/images/placeholder.svg"}
           />`
         )}

packages/shared-ui/src/types/types.ts

@@ -557,6 +557,7 @@ export interface AppTemplateOptions {
   description?: string | null;
   mode: "light" | "dark";
   theme?: AppThemeColors;
+  isDefaultTheme?: boolean;
   splashImage: string | boolean;
   additionalOptions?: AppTemplateAdditionalOptionsChosen;
 }

packages/types/src/graph-descriptor.ts

@@ -357,6 +357,7 @@ export type GraphTheme = {
   template?: string;
   templateAdditionalOptions?: Record<string, string>;
   splashScreen?: StoredDataCapabilityPart;
+  isDefaultTheme?: boolean;
 };
 
 /**

packages/unified-server/src/client/app/elements/app-view/app-view.ts

@@ -108,6 +108,7 @@ export class AppView extends LitElement {
 
     if (this.config.theme?.splashScreen) {
       options.splashImage = true;
+      options.isDefaultTheme = this.config.isDefautTheme;
 
       // Set the options here, then attempt to load the splash screen image.
       this.config.template.options = options;

packages/unified-server/src/client/app/init.ts

@@ -197,10 +197,12 @@ function extractThemeFromFlow(flow: GraphDescriptor | null): {
   templateAdditionalOptionsChosen: Record<string, string>;
   title: string;
   description: string | null;
+  isDefaultTheme: boolean;
 } | null {
   const title = flow?.title ?? "Untitled App";
   const description: string | null = flow?.description ?? null;
 
+  let isDefaultTheme = false;
   let templateAdditionalOptionsChosen: Record<string, string> = {};
 
   const theme: AppTheme = createDefaultTheme();
@@ -216,6 +218,7 @@ function extractThemeFromFlow(flow: GraphDescriptor | null): {
       const appTheme = themes[graphTheme];
       const themeColors = appTheme.themeColors;
       const splashScreen = appTheme.splashScreen;
+      isDefaultTheme = appTheme.isDefaultTheme ?? false;
 
       if (themeColors) {
         theme.primaryColor = themeColors["primaryColor"] ?? primaryColor;
@@ -272,6 +275,7 @@ function extractThemeFromFlow(flow: GraphDescriptor | null): {
     title,
     description,
     templateAdditionalOptionsChosen,
+    isDefaultTheme,
   };
 }
 
@@ -315,6 +319,7 @@ async function bootstrap(args: BootstrapArguments = {}) {
       theme: extractedTheme?.theme ?? null,
       title: extractedTheme?.title ?? null,
       description: extractedTheme?.description ?? null,
+      isDefautTheme: extractedTheme?.isDefaultTheme ?? false,
       templateAdditionalOptions:
         extractedTheme?.templateAdditionalOptionsChosen ?? null,
     };

packages/unified-server/src/client/app/types/types.ts

@@ -31,6 +31,7 @@ export interface AppViewConfig {
   settingsHelper: SettingsHelperImpl;
   runner: Runner | null;
   theme: AppTheme | null;
+  isDefautTheme: boolean;
   title: string | null;
   description: string | null;
   templateAdditionalOptions: Record<string, string> | null;

packages/visual-editor/public/images/app/generic-flow.jpg

@@ -654,19 +654,20 @@ export class Board extends EventTarget {
 
       const graphTheme: GraphTheme = {
         themeColors: {
-          primaryColor: "#246db5",
-          secondaryColor: "#5cadff",
+          primaryColor: "#ffffff",
+          secondaryColor: "#7a7a7a",
           backgroundColor: "#ffffff",
           textColor: "#1a1a1a",
-          primaryTextColor: "#ffffff",
+          primaryTextColor: "#1a1a1a",
         },
         template: "basic",
         splashScreen: {
           storedData: {
-            handle: "/images/app/generic-flow.jpg",
-            mimeType: "image/jpeg",
+            handle: MAIN_ICON,
+            mimeType: "image/svg+xml",
           },
         },
+        isDefaultTheme: true,
       };
 
       const themeId = globalThis.crypto.randomUUID();