@xenide-io/the-old-ui-theme 0.7.0 → 0.9.0

package/src/suite/components/theme-provider.tsx

@@ -6,15 +6,24 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from 'react';
 
-import { useLockMobilePageZoom } from '../lib/use-lock-mobile-page-zoom';
+import { readCookie, writeCookie } from '../lib/cookies';
+import { SUITE_THEME_CHANNEL, SUITE_THEME_COOKIE } from '../lib/theme-cookie';
 
 export type SuiteTheme = 'system' | 'light' | 'dark';
 export type SuiteResolvedTheme = 'light' | 'dark';
 
+/**
+ * One cookie shared by every suite app: pick light/dark/system in any app
+ * and the rest follow (cookies ignore ports on localhost and subdomains can
+ * opt in via the shared domain attribute).
+ */
+export { SUITE_THEME_COOKIE };
+
 export interface SuiteThemeConfig {
   /** localStorage key holding the stored preference. */
   storageKey: string;
@@ -45,6 +54,38 @@ export interface SuiteThemeContextValue {
 
 const SuiteThemeContext = createContext<SuiteThemeContextValue | null>(null);
 
+let suiteThemeChannel: BroadcastChannel | null = null;
+
+function broadcastTheme(theme: SuiteTheme): void {
+  if (typeof BroadcastChannel === 'undefined') return;
+  try {
+    suiteThemeChannel ??= new BroadcastChannel(SUITE_THEME_CHANNEL);
+    suiteThemeChannel.postMessage(theme);
+  } catch {
+    // Cross-tab broadcast is best-effort.
+  }
+}
+
+function readSharedTheme(): SuiteTheme | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const value = readCookie(SUITE_THEME_COOKIE);
+    return value === 'light' || value === 'dark' || value === 'system'
+      ? value
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeSharedTheme(theme: SuiteTheme): void {
+  try {
+    writeCookie(SUITE_THEME_COOKIE, theme);
+  } catch {
+    // Cookie writes can fail in restricted browser contexts.
+  }
+}
+
 function systemTheme(fallback: SuiteResolvedTheme): SuiteResolvedTheme {
   if (typeof window === 'undefined') return fallback;
   return window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -84,9 +125,15 @@ function applyTheme(
 
 function readStoredTheme(storageKey: string): SuiteTheme {
   if (typeof window === 'undefined') return 'system';
-  const stored = localStorage.getItem(storageKey);
-  if (stored === 'light' || stored === 'dark' || stored === 'system')
-    return stored;
+  const shared = readSharedTheme();
+  if (shared) return shared;
+  try {
+    const stored = localStorage.getItem(storageKey);
+    if (stored === 'light' || stored === 'dark' || stored === 'system')
+      return stored;
+  } catch {
+    // localStorage can be unavailable; the cookie still crosses apps.
+  }
   return 'system';
 }
 
@@ -96,6 +143,11 @@ function readStoredTheme(storageKey: string): SuiteTheme {
  * adopts that DOM state on mount and owns every post-hydration change (user
  * picks a theme, or the OS preference flips while set to `system`).
  *
+ * The chosen mode is persisted both to the app's localStorage key and to the
+ * shared suite cookie, and adopted from the cookie whenever another suite
+ * app or tab changes it (focus, visibility, polling and same-origin
+ * `storage`/`BroadcastChannel` events).
+ *
  * Apps wrap this with their own `ThemeProvider`/`useTheme` module that pins
  * the storage key, theme ids and meta colours.
  */
@@ -106,7 +158,6 @@ export function SuiteThemeProvider({
   config: SuiteThemeConfig;
   children: ReactNode;
 }) {
-  useLockMobilePageZoom();
   const [state, setState] = useState<{
     theme: SuiteTheme;
     resolvedTheme: SuiteResolvedTheme;
@@ -124,14 +175,22 @@ export function SuiteThemeProvider({
           : resolveTheme(theme, config.fallbackTheme);
     return { theme, resolvedTheme };
   });
-  const { theme, resolvedTheme } = state;
+  const themeRef = useRef(state.theme);
+  themeRef.current = state.theme;
+
+  useEffect(() => {
+    applyTheme(state.theme, config);
+  }, [state.theme, config]);
 
+  // Seed the shared cookie so a legacy per-app preference spreads to the
+  // rest of the suite on the next app switch.
   useEffect(() => {
-    applyTheme(theme, config);
-  }, [theme, config]);
+    if (readSharedTheme() == null) writeSharedTheme(state.theme);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- seed once on mount
+  }, []);
 
   useEffect(() => {
-    if (theme !== 'system') return;
+    if (state.theme !== 'system') return;
     const media = window.matchMedia('(prefers-color-scheme: dark)');
     const update = () => {
       const resolved = applyTheme('system', config);
@@ -139,32 +198,94 @@ export function SuiteThemeProvider({
     };
     media.addEventListener('change', update);
     return () => media.removeEventListener('change', update);
-  }, [theme, config]);
+  }, [state.theme, config]);
+
+  useEffect(() => {
+    let channel: BroadcastChannel | null = null;
+    try {
+      channel = new BroadcastChannel(SUITE_THEME_CHANNEL);
+    } catch {
+      channel = null;
+    }
+
+    const adopt = (next: unknown) => {
+      if (next !== 'light' && next !== 'dark' && next !== 'system') return;
+      if (next === themeRef.current) return;
+      const resolved = applyTheme(next, config);
+      try {
+        localStorage.setItem(config.storageKey, next);
+      } catch {
+        // localStorage can be unavailable; the cookie still crosses apps.
+      }
+      setState({ theme: next, resolvedTheme: resolved });
+    };
+
+    const readShared = () => adopt(readSharedTheme());
+    const onChannel = (event: MessageEvent) => adopt(event.data);
+    const onStorage = (event: StorageEvent) => {
+      if (event.key === config.storageKey) adopt(event.newValue);
+    };
+    let poll: ReturnType<typeof setInterval> | null = null;
+    const startPolling = () => {
+      if (poll == null) poll = setInterval(readShared, 2000);
+    };
+    const stopPolling = () => {
+      if (poll != null) {
+        clearInterval(poll);
+        poll = null;
+      }
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        readShared();
+        startPolling();
+      } else {
+        stopPolling();
+      }
+    };
+
+    channel?.addEventListener('message', onChannel);
+    window.addEventListener('storage', onStorage);
+    window.addEventListener('focus', readShared);
+    document.addEventListener('visibilitychange', onVisibility);
+    if (document.visibilityState === 'visible') startPolling();
+
+    return () => {
+      channel?.removeEventListener('message', onChannel);
+      channel?.close();
+      window.removeEventListener('storage', onStorage);
+      window.removeEventListener('focus', readShared);
+      document.removeEventListener('visibilitychange', onVisibility);
+      stopPolling();
+    };
+  }, [config]);
 
   const setTheme = useCallback(
     (next: SuiteTheme) => {
       const resolved = applyTheme(next, config);
       setState({ theme: next, resolvedTheme: resolved });
-      localStorage.setItem(config.storageKey, next);
+      try {
+        localStorage.setItem(config.storageKey, next);
+      } catch {
+        // localStorage can be unavailable; the cookie still crosses apps.
+      }
+      writeSharedTheme(next);
+      broadcastTheme(next);
     },
     [config],
   );
 
   const toggleTheme = useCallback(() => {
-    setState((prev) => {
-      const next: SuiteTheme =
-        resolveTheme(prev.theme, config.fallbackTheme) === 'dark'
-          ? 'light'
-          : 'dark';
-      const resolved = applyTheme(next, config);
-      localStorage.setItem(config.storageKey, next);
-      return { theme: next, resolvedTheme: resolved };
-    });
-  }, [config]);
+    const next: SuiteTheme =
+      resolveTheme(themeRef.current, config.fallbackTheme) === 'dark'
+        ? 'light'
+        : 'dark';
+    setTheme(next);
+  }, [config, setTheme]);
 
   const value = useMemo(
-    () => ({ theme, resolvedTheme, setTheme, toggleTheme }),
-    [theme, resolvedTheme, setTheme, toggleTheme],
+    () => ({ theme: state.theme, resolvedTheme: state.resolvedTheme, setTheme, toggleTheme }),
+    [state.theme, state.resolvedTheme, setTheme, toggleTheme],
   );
 
   return (

package/src/suite/components/today-ui.tsx

@@ -1,53 +1,59 @@
-'use client';
-
-import { Refresh as RefreshCw } from 'iconoir-react';
-import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { SuiteAppIcon } from '../icons/suite-app-icon';
-import { SuiteIcon } from '../icons/suite-icon';
-import type { SuiteIconName } from '../icons/glyphs';
-type LucideIcon = import('react').ComponentType<
-  import('react').SVGProps<SVGSVGElement>
+"use client";
+
+import { Refresh as RefreshCw } from "iconoir-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { SuiteAppIcon } from "../icons/suite-app-icon";
+import { SuiteIcon } from "../icons/suite-icon";
+type LucideIcon = import("react").ComponentType<
+  import("react").SVGProps<SVGSVGElement>
 >;
 
-export type SuiteAppSlug = 'shellstack' | 'tides' | 'turtletime' | 'kraken';
+export type SuiteAppSlug =
+  "shellstack" | "tides" | "turtletime" | "kraken" | "shelly";
 
 const APP_META: Record<SuiteAppSlug, { name: string }> = {
-  shellstack: { name: 'ShellStack' },
-  tides: { name: 'Tides' },
-  turtletime: { name: 'TurtleTime' },
-  kraken: { name: 'Kraken' },
+  shellstack: { name: "ShellStack" },
+  tides: { name: "Tides" },
+  turtletime: { name: "TurtleTime" },
+  kraken: { name: "Kraken" },
+  shelly: { name: "Shelly" },
 };
 
 const SUITE_APPS: SuiteAppSlug[] = [
-  'shellstack',
-  'tides',
-  'turtletime',
-  'kraken',
+  "shellstack",
+  "tides",
+  "turtletime",
+  "kraken",
+  "shelly",
 ];
 
 export function sourceToSuiteApp(source: string): SuiteAppSlug {
-  if (source === 'tides' || source === 'turtletime' || source === 'kraken') {
-    return source;
+  const normalised = source.trim().toLowerCase();
+  if (
+    normalised === "tides" ||
+    normalised === "turtletime" ||
+    normalised === "kraken" ||
+    normalised === "shelly"
+  ) {
+    return normalised;
   }
-  return 'shellstack';
+  return "shellstack";
 }
 
 export function suiteAppLabel(source: string): string {
   return APP_META[sourceToSuiteApp(source)].name;
 }
 
-const SOURCE_APP_GLYPH: Record<SuiteAppSlug, SuiteIconName> = {
-  shellstack: 'stack-hex',
-  tides: 'kanban-wave',
-  turtletime: 'timer-shell',
-  kraken: 'squid-doc',
+const SOURCE_APP_LOGOS: Record<SuiteAppSlug, string> = {
+  shellstack: "/icon-shellstack.svg",
+  tides: "/tides-icon.svg",
+  turtletime: "/turtletime-icon.svg",
+  kraken: "/kraken-icon.svg",
+  shelly: "/shelly-icon.svg",
 };
 
-/**
- * Small line icon for list rows — the app's suite glyph with its brand
- * accent on a muted base. Not the branded app tile (see SuiteAppIcon).
- */
+/** Actual product favicon/logo for suite notification rows. */
 export function SourceAppGlyph({
   source,
   className,
@@ -57,18 +63,20 @@ export function SourceAppGlyph({
 }) {
   const app = sourceToSuiteApp(source);
   return (
-    <SuiteIcon
-      name={SOURCE_APP_GLYPH[app]}
-      accent={app}
-      className={cn('h-4 w-4 shrink-0 text-ph-subtle', className)}
+    // These assets are copied into each product's public directory.
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={SOURCE_APP_LOGOS[app]}
+      alt=""
+      className={cn("h-7 w-7 shrink-0 rounded-lg object-contain", className)}
     />
   );
 }
 
 function formatLongDate(date = new Date()): string {
   return new Intl.DateTimeFormat(undefined, {
-    month: 'long',
-    day: 'numeric',
+    month: "long",
+    day: "numeric",
   }).format(date);
 }
 
@@ -82,7 +90,7 @@ export function SuiteAppStrip({
   return (
     <div
       className={cn(
-        'flex flex-wrap items-center justify-center gap-2.5',
+        "flex flex-wrap items-center justify-center gap-2.5",
         className,
       )}
       aria-label="ShellStack suite apps"
@@ -223,7 +231,7 @@ export function TodayTopBar({
           aria-label="Refresh today"
         >
           <RefreshCw
-            className={cn('h-4 w-4', refreshing && 'animate-spin')}
+            className={cn("h-4 w-4", refreshing && "animate-spin")}
             aria-hidden
           />
         </button>
@@ -237,15 +245,15 @@ export function getTodayGreeting(
   stats?: { taskCount?: number; overdueCount?: number; hours?: number },
 ): string {
   const hour = new Date().getHours();
-  let period = 'morning';
-  if (hour >= 12 && hour < 17) period = 'afternoon';
-  else if (hour >= 17 && hour < 21) period = 'evening';
-  else if (hour >= 21 || hour < 5) period = 'night';
+  let period = "morning";
+  if (hour >= 12 && hour < 17) period = "afternoon";
+  else if (hour >= 17 && hour < 21) period = "evening";
+  else if (hour >= 21 || hour < 5) period = "night";
 
   const name =
     user?.first_name ||
-    user?.name?.split(' ')[0] ||
-    user?.email?.split('@')[0] ||
+    user?.name?.split(" ")[0] ||
+    user?.email?.split("@")[0] ||
     null;
 
   let greeting = `Good ${period}`;
@@ -256,22 +264,22 @@ export function getTodayGreeting(
   const hours = stats?.hours ?? 0;
 
   if (overdueCount > 0) {
-    return `${greeting}. ${taskCount} task${taskCount === 1 ? '' : 's'} due today, ${overdueCount} overdue.`;
+    return `${greeting}. ${taskCount} task${taskCount === 1 ? "" : "s"} due today, ${overdueCount} overdue.`;
   }
   if (taskCount > 0) {
-    return `${greeting}. ${taskCount} task${taskCount === 1 ? '' : 's'} due today.`;
+    return `${greeting}. ${taskCount} task${taskCount === 1 ? "" : "s"} due today.`;
   }
   if (hours > 0) {
-    return `${greeting}. ${hours} hour${hours === 1 ? '' : 's'} logged today.`;
+    return `${greeting}. ${hours} hour${hours === 1 ? "" : "s"} logged today.`;
   }
-  if (period === 'evening' || period === 'night') {
+  if (period === "evening" || period === "night") {
     return `${greeting}. Nice work — time to wrap up.`;
   }
   return `${greeting}. Clear queue — take a nice, deep breath.`;
 }
 
 export function TodayHero({
-  message = 'Take a nice, deep breath.',
+  message = "Take a nice, deep breath.",
   brief,
   briefMeta,
 }: {
@@ -283,7 +291,7 @@ export function TodayHero({
   return (
     <div className="mt-4 sm:mt-6">
       <p
-        key={typeof message === 'string' ? message : 'hero'}
+        key={typeof message === "string" ? message : "hero"}
         className="today-hero max-w-2xl font-display text-lg font-semibold tracking-tight text-ph-ink sm:text-xl sm:leading-snug"
       >
         {message}
@@ -301,7 +309,7 @@ export function TodayHero({
 }
 
 export type TodayPrimaryAccent =
-  'tides' | 'turtletime' | 'kraken' | 'shellstack' | 'neutral';
+  "tides" | "turtletime" | "kraken" | "shellstack" | "neutral";
 
 /**
  * Compact primary CTA for Today — one action per app.
@@ -311,13 +319,13 @@ export function TodayPrimaryAction({
   label,
   description,
   icon,
-  accent = 'neutral',
+  accent = "neutral",
   onClick,
   href,
   loading = false,
   active = false,
   className,
-  dataTest = 'today-primary-action',
+  dataTest = "today-primary-action",
 }: {
   label: string;
   description?: string;
@@ -332,10 +340,10 @@ export function TodayPrimaryAction({
   dataTest?: string;
 }) {
   const classes = cn(
-    'today-primary-action group relative flex w-full max-w-md items-center gap-3 overflow-hidden rounded-xl px-3.5 py-2.5 text-left transition sm:px-4 sm:py-3',
+    "today-primary-action group relative flex w-full max-w-md items-center gap-3 overflow-hidden rounded-xl px-3.5 py-2.5 text-left transition sm:px-4 sm:py-3",
     `today-primary-action--${accent}`,
-    active && 'today-primary-action--active',
-    loading && 'pointer-events-none opacity-70',
+    active && "today-primary-action--active",
+    loading && "pointer-events-none opacity-70",
     className,
   );
 
@@ -452,7 +460,7 @@ export function TodayLayout({
 }) {
   return (
     <div
-      className={cn('mt-5 space-y-6 sm:mt-6', className)}
+      className={cn("mt-5 space-y-6 sm:mt-6", className)}
       data-test="today-layout"
     >
       {primary ? <div className="max-w-md">{primary}</div> : null}
@@ -473,9 +481,9 @@ export function TodayLayout({
  * Prefer onClick → openSuiteAskAi(); href is a fallback only.
  */
 export function TodayAskAiCard({
-  title = 'Shelly AI',
-  description = 'Ask about your workspace, draft something, or look a fact up online.',
-  cta = 'Ask',
+  title = "Shelly AI",
+  description = "Ask about your workspace, draft something, or look a fact up online.",
+  cta = "Ask",
   className,
   onClick,
   href,
@@ -488,15 +496,18 @@ export function TodayAskAiCard({
   href?: string;
 }) {
   const classes = cn(
-    'group flex w-full items-start gap-3.5 rounded-2xl border border-ph-border/70 bg-ph-surface px-4 py-3.5 text-left shadow-[0_1px_12px_-8px_rgba(15,23,42,0.1)] transition hover:border-ph-brand/35 hover:bg-[color-mix(in_oklab,var(--ph-accent)_6%,var(--ph-surface))] sm:px-5',
+    "group flex w-full items-start gap-3.5 rounded-2xl border border-ph-border/70 bg-ph-surface px-4 py-3.5 text-left shadow-[0_1px_12px_-8px_rgba(15,23,42,0.1)] transition hover:border-ph-brand/35 hover:bg-[color-mix(in_oklab,var(--ph-accent)_6%,var(--ph-surface))] sm:px-5",
     className,
   );
 
   const body = (
     <>
-      <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-ph-brand/15 text-ph-brand shadow-sm ring-1 ring-black/[0.06]">
-        <SuiteIcon name="stack-hex" accent="shellstack" className="h-5 w-5" />
-      </span>
+      <img
+        src="/shelly-icon.svg"
+        alt=""
+        aria-hidden
+        className="h-5 w-5 shrink-0 object-contain"
+      />
       <span className="min-w-0 flex-1">
         <span className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
           <span className="font-display text-sm font-bold tracking-tight text-ph-ink">
@@ -564,8 +575,8 @@ export function TodaySection({
         <div className="flex min-w-0 items-start gap-3.5">
           <span
             className={cn(
-              'inline-flex h-10 w-10 sm:h-11 sm:w-11 shrink-0 items-center justify-center rounded-2xl shadow-sm ring-1 ring-black/[0.06]',
-              iconClassName ?? 'bg-ph-muted text-ph-ink',
+              "inline-flex h-10 w-10 sm:h-11 sm:w-11 shrink-0 items-center justify-center rounded-2xl shadow-sm ring-1 ring-black/[0.06]",
+              iconClassName ?? "bg-ph-muted text-ph-ink",
             )}
           >
             <Icon className="h-5 w-5" aria-hidden />
@@ -598,7 +609,7 @@ export function TodayPanel({
   return (
     <div
       className={cn(
-        'border-ph-border/70 rounded-2xl border bg-ph-surface p-5 shadow-[0_1px_16px_-8px_rgba(15,23,42,0.12)] sm:p-5',
+        "border-ph-border/70 rounded-2xl border bg-ph-surface p-5 shadow-[0_1px_16px_-8px_rgba(15,23,42,0.12)] sm:p-5",
         className,
       )}
     >

package/src/suite/components/workspace-switcher.test.tsx

@@ -0,0 +1,56 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { SuiteWorkspaceSwitcher } from "./workspace-switcher";
+
+function TestDropdownMenu({
+  trigger,
+  children,
+}: {
+  trigger: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div>
+      {trigger}
+      {children}
+    </div>
+  );
+}
+
+function TestDropdownItem({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"button">) {
+  return (
+    <button data-dropdown-item="true" {...props}>
+      {children}
+    </button>
+  );
+}
+
+describe("SuiteWorkspaceSwitcher", () => {
+  afterEach(cleanup);
+
+  it("uses menu items rather than listbox options for workspace choices", () => {
+    render(
+      <SuiteWorkspaceSwitcher
+        name="Acme"
+        currentId="acme"
+        workspaces={[
+          { id: "acme", name: "Acme" },
+          { id: "globex", name: "Globex" },
+        ]}
+        onSelect={vi.fn()}
+        dropdownMenu={TestDropdownMenu}
+        dropdownItem={TestDropdownItem}
+      />,
+    );
+
+    const currentWorkspace = screen.getByRole("button", { name: "Acme" });
+    expect(currentWorkspace).toHaveAttribute("data-dropdown-item", "true");
+    expect(currentWorkspace).toHaveAttribute("aria-current", "true");
+    expect(currentWorkspace).not.toHaveAttribute("role", "option");
+  });
+});

package/src/suite/components/workspace-switcher.tsx

@@ -82,7 +82,6 @@ export function SuiteWorkspaceSwitcher({
             open && "border-ph-brand/40",
           )}
           data-test="workspace-switcher-trigger"
-          aria-expanded={open}
         >
           <Building className="h-4 w-4 shrink-0 text-ph-ink" aria-hidden />
           {!collapsed ? (
@@ -119,8 +118,9 @@ export function SuiteWorkspaceSwitcher({
                 <DropdownItem
                   key={workspace.id}
                   id={`workspace-option-${workspace.id}`}
-                  role="option"
-                  aria-selected={workspace.id === currentId}
+                  aria-current={
+                    workspace.id === currentId ? "true" : undefined
+                  }
                   data-test="workspace-option"
                   data-workspace-id={workspace.id}
                   onMouseDown={(event) => event.preventDefault()}

package/src/suite/icons/app-accents.ts

@@ -8,7 +8,7 @@ import type { SuiteIconName } from "./glyphs";
  */
 
 export type SuiteAccentSlug =
-  "turtletime" | "tides" | "kraken" | "shellstack" | "crew" | "nakama";
+  "turtletime" | "tides" | "kraken" | "shellstack" | "crew" | "shelly";
 
 export interface SuiteAppAccent {
   /** Display name (default aria label for app marks). */
@@ -47,10 +47,10 @@ export const APP_ACCENTS: Record<SuiteAccentSlug, SuiteAppAccent> = {
   },
   shellstack: {
     label: "ShellStack",
-    accent: "#5e5893",
-    tile: "#5e5893",
-    onTile: "#ffffff",
-    onTileAccent: "#c4a7e7",
+    accent: "#0078D4",
+    tile: "#FFFFFF",
+    onTile: "#111114",
+    onTileAccent: "#0078D4",
   },
   crew: {
     label: "Crew",
@@ -59,12 +59,12 @@ export const APP_ACCENTS: Record<SuiteAccentSlug, SuiteAppAccent> = {
     onTile: "#ffffff",
     onTileAccent: "#a5f3fc",
   },
-  nakama: {
-    label: "Nakama",
-    accent: "#b8eb44",
-    tile: "#17101f",
-    onTile: "#fff2e2",
-    onTileAccent: "#f54b87",
+  shelly: {
+    label: "Shelly",
+    accent: "#0078D4",
+    tile: "#1B1B1F",
+    onTile: "#ECECF1",
+    onTileAccent: "#00BCF2",
   },
 };
 
@@ -75,5 +75,5 @@ export const APP_GLYPHS: Record<SuiteAccentSlug, SuiteIconName> = {
   kraken: "squid-doc",
   shellstack: "stack-hex",
   crew: "crew-bot",
-  nakama: "nakama-fist",
+  shelly: "shelly-snail",
 };