@xenide-io/the-old-ui-theme 0.9.18 → 0.11.0

package/src/suite/components/suite-palette-library.tsx

@@ -3,10 +3,12 @@
 import {
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
   type ReactNode,
+  type KeyboardEvent as ReactKeyboardEvent,
 } from 'react';
 import { Filter, FilterList, NavArrowDown, Search } from 'iconoir-react';
 import {
@@ -58,7 +60,7 @@ function FilterSelect({
         aria-label={label}
         value={value}
         onChange={(event) => onChange(event.target.value)}
-        className="h-full w-full appearance-none rounded-lg border border-ph-border bg-ph-surface py-2 pl-8 pr-7 text-sm text-ph-ink focus:border-ph-brand focus:outline-none"
+        className="ph-select h-full w-full py-2 pl-8 pr-7"
       >
         {children}
       </select>
@@ -86,6 +88,8 @@ export function SuitePaletteLibrary({
   const [libraryOpen, setLibraryOpen] = useState(false);
   const [libraryQuery, setLibraryQuery] = useState('');
   const libraryRef = useRef<HTMLDivElement>(null);
+  const libraryTriggerRef = useRef<HTMLButtonElement>(null);
+  const libraryListboxId = useId();
   const [icons, setIcons] = useState<PaletteIcon[]>([]);
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(1);
@@ -245,6 +249,45 @@ export function SuitePaletteLibrary({
     return () => document.removeEventListener('pointerdown', onPointerDown);
   }, [libraryOpen]);
 
+  const closeLibrary = (restoreFocus = false) => {
+    setLibraryOpen(false);
+    if (restoreFocus) requestAnimationFrame(() => libraryTriggerRef.current?.focus());
+  };
+
+  const handleLibraryOptionKeyDown = (
+    event: ReactKeyboardEvent<HTMLButtonElement>,
+  ) => {
+    const options = Array.from(
+      libraryRef.current?.querySelectorAll<HTMLButtonElement>('[role="option"]') ?? [],
+    );
+    const index = options.indexOf(event.currentTarget);
+    let nextIndex: number;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        nextIndex = (index + 1) % options.length;
+        break;
+      case 'ArrowUp':
+        nextIndex = (index - 1 + options.length) % options.length;
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = options.length - 1;
+        break;
+      case 'Escape':
+        event.preventDefault();
+        closeLibrary(true);
+        return;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    options[nextIndex]?.focus();
+  };
+
   return (
     <div className="space-y-3" data-test="palette-icon-library">
       <div ref={libraryRef} className="space-y-2">
@@ -260,15 +303,23 @@ export function SuitePaletteLibrary({
               onChange={(event) => setQuery(event.target.value)}
               placeholder="Search icons — handshake, rocket, briefcase…"
               aria-label="Search icons"
-              className="w-full rounded-lg border border-ph-border bg-ph-surface py-2 pl-8 pr-3 text-sm text-ph-ink placeholder:text-ph-mutedtext focus:border-ph-brand focus:outline-none"
+              className="ph-input w-full py-2 pl-8 pr-3"
             />
           </div>
           <button
+            ref={libraryTriggerRef}
             type="button"
             aria-haspopup="listbox"
             aria-expanded={libraryOpen}
+            aria-controls={libraryOpen ? libraryListboxId : undefined}
             onClick={() => setLibraryOpen((open) => !open)}
-            className="flex items-center gap-2 rounded-lg border border-ph-border bg-ph-surface px-2.5 py-2 text-sm text-ph-ink hover:border-ph-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+            onKeyDown={(event) => {
+              if (event.key === 'Escape' && libraryOpen) {
+                event.preventDefault();
+                closeLibrary();
+              }
+            }}
+            className="ph-input flex items-center gap-2 px-2.5 py-2 text-sm text-ph-ink"
           >
             <FilterList className="h-4 w-4 shrink-0 text-ph-mutedtext" aria-hidden />
             <span className="max-w-[10rem] truncate">
@@ -297,7 +348,7 @@ export function SuitePaletteLibrary({
         </div>
 
         {libraryOpen ? (
-          <div className="rounded-lg border border-ph-border bg-ph-surface p-2">
+          <div className="rounded-[var(--ph-radius-overlay)] border border-[var(--ph-border-control)] bg-[var(--ph-surface-overlay)] p-2 shadow-[var(--ph-shadow-floating)]">
             <div className="relative mb-2">
               <Search
                 className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ph-mutedtext"
@@ -310,11 +361,23 @@ export function SuitePaletteLibrary({
                 onChange={(event) => setLibraryQuery(event.target.value)}
                 placeholder="Search libraries…"
                 aria-label="Search libraries"
-                className="w-full rounded-md border border-ph-border bg-ph-muted py-1.5 pl-8 pr-3 text-sm text-ph-ink placeholder:text-ph-mutedtext focus:border-ph-brand focus:outline-none"
+                className="ph-input w-full bg-[var(--ph-surface-inset)] py-1.5 pl-8 pr-3"
+                onKeyDown={(event) => {
+                  if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    libraryRef.current
+                      ?.querySelector<HTMLButtonElement>('[role="option"]')
+                      ?.focus();
+                  } else if (event.key === 'Escape') {
+                    event.preventDefault();
+                    closeLibrary(true);
+                  }
+                }}
               />
             </div>
             <ul
               role="listbox"
+              id={libraryListboxId}
               aria-label="Libraries"
               className="max-h-56 overflow-y-auto"
             >
@@ -323,15 +386,17 @@ export function SuitePaletteLibrary({
                   type="button"
                   role="option"
                   aria-selected={!collectionFilter}
+                  tabIndex={-1}
+                  onKeyDown={handleLibraryOptionKeyDown}
                   onClick={() => {
                     setCollectionFilter("");
-                    setLibraryOpen(false);
+                    closeLibrary(true);
                   }}
                   className={cn(
-                    "flex w-full items-center rounded-md px-2 py-1.5 text-left text-sm",
+                    "flex w-full items-center rounded-[var(--ph-radius-control)] px-2 py-1.5 text-left text-sm focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]",
                     !collectionFilter
-                      ? "bg-ph-muted text-ph-ink"
-                      : "text-ph-ink hover:bg-ph-muted",
+                      ? "bg-[var(--ph-selected-bg)] text-[var(--ph-selected-text)]"
+                      : "text-ph-ink hover:bg-[var(--ph-surface-hover)]",
                   )}
                 >
                   All libraries
@@ -343,15 +408,17 @@ export function SuitePaletteLibrary({
                     type="button"
                     role="option"
                     aria-selected={collectionFilter === collection.slug}
+                    tabIndex={-1}
+                    onKeyDown={handleLibraryOptionKeyDown}
                     onClick={() => {
                       setCollectionFilter(collection.slug);
-                      setLibraryOpen(false);
+                      closeLibrary(true);
                     }}
                     className={cn(
-                      "flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-sm",
+                      "flex w-full items-center justify-between gap-2 rounded-[var(--ph-radius-control)] px-2 py-1.5 text-left text-sm focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]",
                       collectionFilter === collection.slug
-                        ? "bg-ph-muted text-ph-ink"
-                        : "text-ph-ink hover:bg-ph-muted",
+                        ? "bg-[var(--ph-selected-bg)] text-[var(--ph-selected-text)]"
+                        : "text-ph-ink hover:bg-[var(--ph-surface-hover)]",
                     )}
                   >
                     <span className="truncate">{collection.name}</span>
@@ -381,7 +448,7 @@ export function SuitePaletteLibrary({
         </p>
       ) : (
         <>
-          <div className="max-h-[320px] overflow-y-auto rounded-lg border border-ph-border p-2">
+          <div className="max-h-[320px] overflow-y-auto rounded-[var(--ph-radius-surface)] border border-ph-border p-2 focus-within:border-[var(--ph-selected-border)]">
             <div className="grid grid-cols-6 gap-1.5 sm:grid-cols-8">
               {icons.map((icon) => (
                 <button
@@ -390,7 +457,7 @@ export function SuitePaletteLibrary({
                   onClick={() => onPick({ url: icon.url, name: icon.name })}
                   title={icon.name}
                   aria-label={`Use ${icon.name}`}
-                  className="flex h-10 items-center justify-center rounded-md border border-transparent p-1.5 hover:border-ph-brand hover:bg-ph-muted"
+                  className="flex h-10 items-center justify-center rounded-[var(--ph-radius-control)] border border-transparent p-1.5 hover:border-[var(--ph-selected-border)] hover:bg-[var(--ph-surface-hover)] focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]"
                 >
                   {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img

package/src/suite/components/suite-settings-layout.tsx

@@ -53,7 +53,7 @@ export function SuiteSettingsLayout({
       {loading ?? (
         <div className="suite-page-body mt-6 flex min-h-0 flex-1 flex-col">
           {mobileNav ? (
-            <div className="sticky top-0 z-20 mb-2 shrink-0 bg-ph-canvas/95 backdrop-blur lg:hidden">
+            <div className="suite-settings-mobile-bar sticky top-0 z-20 mb-2 shrink-0 lg:hidden">
               {mobileNav}
             </div>
           ) : null}
@@ -61,7 +61,7 @@ export function SuiteSettingsLayout({
           <div className="flex min-h-0 flex-1 flex-col gap-6 lg:flex-row lg:gap-8">
             <aside
               aria-label="Settings"
-              className="hidden w-56 shrink-0 bg-transparent lg:block lg:self-stretch lg:overflow-y-auto lg:overscroll-contain"
+              className="suite-settings-sidebar hidden w-56 shrink-0 lg:block lg:self-start lg:max-h-full lg:overflow-y-auto lg:overscroll-contain"
             >
               {sidebar}
             </aside>

package/src/suite/components/suite-settings-mobile-nav.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { isValidElement, type ElementType, type ReactNode } from "react";
+import { trackSuiteEvent } from "../../lib/suite-analytics";
 import { cn } from "../lib/cn";
 
 export interface SuiteSettingsNavItem {
@@ -50,8 +51,8 @@ export function SuiteSettingsMobileNav({
           ) : (
             <Icon
               className={cn(
-                "h-4 w-4 shrink-0 transition",
-                active ? "text-ph-surface" : "text-ph-mutedtext",
+                "h-4 w-4 shrink-0 transition-colors",
+                active ? "text-[var(--ph-selected-text)]" : "text-ph-mutedtext",
               )}
               aria-hidden
             />
@@ -62,21 +63,20 @@ export function SuiteSettingsMobileNav({
               type="button"
               id={item.id}
               data-test={item.testId}
-              onClick={() => onSelect(item.href)}
+              onClick={() => {
+                trackSuiteEvent("Tab Viewed", { tab: item.id ?? item.href });
+                onSelect(item.href);
+              }}
               aria-current={active ? "page" : undefined}
               className={cn(
-                "group relative flex shrink-0 snap-start items-center gap-2 rounded-full px-3.5 py-2.5 text-sm font-medium transition-colors",
-                "min-h-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
+                "group relative flex min-h-[44px] shrink-0 snap-start items-center gap-2 rounded-[var(--ph-radius-control)] border px-3.5 py-2.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]",
                 active
-                  ? "bg-ph-ink text-ph-surface shadow-sm"
-                  : "bg-ph-surface text-ph-subtle ring-1 ring-ph-border hover:bg-ph-muted hover:text-ph-ink",
+                  ? "border-[var(--ph-selected-border)] bg-[var(--ph-selected-bg)] text-[var(--ph-selected-text)]"
+                  : "border-ph-border bg-ph-surface text-ph-subtle hover:bg-[var(--ph-surface-hover)] hover:text-ph-ink",
               )}
             >
               {iconNode}
               <span className="whitespace-nowrap">{item.label}</span>
-              {active ? (
-                <span className="absolute inset-x-0 -bottom-3 h-0.5 rounded-full bg-ph-ink lg:hidden" />
-              ) : null}
             </button>
           );
         })}

package/src/suite/components/suite-sidebar.test.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { SuiteSidebar } from "./suite-sidebar";
+
+afterEach(cleanup);
+
+describe("SuiteSidebar Ask AI", () => {
+  it("moves focus into chat and restores it after Escape", async () => {
+    const user = userEvent.setup();
+
+    function Fixture() {
+      const [open, setOpen] = useState(false);
+      return (
+        <SuiteSidebar
+          navItems={[]}
+          userMenu={<span>Account</span>}
+          askAiOpen={open}
+          onAskAiOpenChange={setOpen}
+          askAi={<div>Chat</div>}
+        />
+      );
+    }
+
+    render(<Fixture />);
+    const trigger = screen.getByRole("button", { name: "Shelly AI" });
+    await user.click(trigger);
+
+    const back = screen.getByRole("button", { name: "Back to navigation" });
+    await waitFor(() => expect(back).toHaveFocus());
+    await user.keyboard("{Escape}");
+
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Shelly AI" })).toHaveFocus(),
+    );
+  });
+});

package/src/suite/components/suite-sidebar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useCallback, useEffect, type ReactNode } from "react";
+import { useCallback, useEffect, useRef, type ReactNode } from "react";
 import { NavArrowLeft, Sparks } from "iconoir-react";
 
 import { Tooltip } from "../../components/ui/Tooltip";
@@ -83,6 +83,9 @@ export function SuiteSidebar({
 }: SuiteSidebarProps) {
   const showAskAi = Boolean(onAskAiOpenChange && askAi);
   const chatOpen = showAskAi && askAiOpen && !collapsed;
+  const askAiButtonRef = useRef<HTMLButtonElement>(null);
+  const askAiBackRef = useRef<HTMLButtonElement>(null);
+  const restoreAskAiFocusRef = useRef(false);
 
   const setAskAi = useCallback(
     (next: boolean) => {
@@ -105,15 +108,35 @@ export function SuiteSidebar({
   useEffect(() => {
     if (!chatOpen) return;
     function onKey(event: KeyboardEvent) {
-      if (event.key === "Escape") setAskAi(false);
+      if (event.key === "Escape") {
+        restoreAskAiFocusRef.current = true;
+        setAskAi(false);
+      }
     }
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [chatOpen, setAskAi]);
 
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (chatOpen) {
+        askAiBackRef.current?.focus();
+      } else if (restoreAskAiFocusRef.current) {
+        restoreAskAiFocusRef.current = false;
+        askAiButtonRef.current?.focus();
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [chatOpen]);
+
+  function closeAskAi() {
+    restoreAskAiFocusRef.current = true;
+    setAskAi(false);
+  }
+
   function toggleAskAi() {
     if (askAiOpen) {
-      setAskAi(false);
+      closeAskAi();
       return;
     }
     if (collapsed) onRequestExpand?.();
@@ -122,13 +145,14 @@ export function SuiteSidebar({
 
   const askAiButton = (
     <button
+      ref={askAiButtonRef}
       type="button"
       data-test="suite-ask-ai-toggle"
       aria-pressed={askAiOpen}
       aria-label={askAiOpen ? "Back to navigation" : "Shelly AI"}
       onClick={toggleAskAi}
       className={cn(
-        "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring",
+        "ph-btn ph-btn-ghost ph-btn-square h-10 w-10 shrink-0",
         askAiOpen
           ? "bg-ph-brand/10 text-ph-brand"
           : "text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink",
@@ -142,9 +166,9 @@ export function SuiteSidebar({
     return (
       <div
         data-suite-chat-open=""
+        data-surface={surface ? "true" : "false"}
         className={cn(
-          "flex h-full w-full min-w-0 flex-col text-ph-ink",
-          surface ? "bg-ph-surface" : "bg-ph-canvas",
+          "suite-sidebar flex h-full w-full min-w-0 flex-col text-ph-ink",
           className,
         )}
       >
@@ -155,11 +179,12 @@ export function SuiteSidebar({
           )}
         >
           <button
+            ref={askAiBackRef}
             type="button"
             data-test="suite-ask-ai-back"
             aria-label="Back to navigation"
-            onClick={() => setAskAi(false)}
-            className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+            onClick={closeAskAi}
+            className="ph-btn ph-btn-ghost ph-btn-square h-10 w-10 shrink-0 text-ph-subtle"
           >
             <NavArrowLeft className="h-4 w-4" aria-hidden />
           </button>
@@ -174,9 +199,9 @@ export function SuiteSidebar({
 
   return (
     <div
+      data-surface={surface ? "true" : "false"}
       className={cn(
-        "flex h-full w-full min-w-0 flex-col text-ph-ink",
-        surface ? "bg-ph-surface" : "bg-ph-canvas",
+        "suite-sidebar flex h-full w-full min-w-0 flex-col text-ph-ink",
         className,
       )}
     >
@@ -184,7 +209,6 @@ export function SuiteSidebar({
         <div
           className={cn(
             "flex shrink-0 border-b border-ph-border",
-            surface ? "bg-ph-surface" : "bg-ph-canvas",
             collapsed
               ? "flex-col items-center gap-1 px-1 py-2"
               : "h-14 items-center justify-between gap-2 px-3",
@@ -204,7 +228,6 @@ export function SuiteSidebar({
       <div
         className={cn(
           "flex min-h-0 flex-1 flex-col",
-          surface ? "bg-ph-surface" : "bg-ph-canvas",
           chatOpen ? "min-h-0" : "overflow-y-auto",
           collapsed ? "px-1.5 py-2" : "p-3",
         )}
@@ -226,8 +249,8 @@ export function SuiteSidebar({
               <button
                 type="button"
                 data-test="suite-ask-ai-back"
-                onClick={() => setAskAi(false)}
-                className="inline-flex h-9 items-center gap-1 rounded-lg px-2 text-sm font-medium text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+                onClick={closeAskAi}
+                className="ph-btn ph-btn-ghost ph-btn-sm h-9 text-ph-subtle"
               >
                 <NavArrowLeft className="h-4 w-4" aria-hidden />
                 Nav
@@ -254,10 +277,10 @@ export function SuiteSidebar({
                       aria-current={active ? "page" : undefined}
                       onClick={item.onClick}
                       className={cn(
-                        "group relative flex min-h-11 touch-manipulation items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
+                        "suite-sidebar-link group relative flex min-h-11 touch-manipulation items-center gap-2.5 rounded-[var(--ph-radius-control)] text-sm font-medium transition-colors",
                         active
-                          ? "bg-ph-muted"
-                          : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
+                          ? "bg-[var(--ph-selected-bg)] text-[var(--ph-selected-text)]"
+                          : "text-ph-subtle hover:bg-[var(--ph-surface-hover)] hover:text-ph-ink",
                         collapsed
                           ? "mx-auto size-11 shrink-0 justify-center gap-0 px-0 py-0"
                           : "w-full px-2.5 py-2",
@@ -279,7 +302,7 @@ export function SuiteSidebar({
                         className={cn(
                           "relative truncate",
                           active
-                            ? "text-ph-ink"
+                            ? "text-[var(--ph-selected-text)]"
                             : "text-ph-subtle group-hover:text-ph-ink",
                           collapsed && "sr-only",
                         )}
@@ -319,7 +342,6 @@ export function SuiteSidebar({
       <div
         className={cn(
           "shrink-0 border-t border-ph-border",
-          surface ? "bg-ph-surface" : "bg-ph-canvas",
           collapsed ? "p-1.5" : "p-3",
         )}
       >

package/src/suite/components/suite-skeleton.tsx

@@ -65,7 +65,7 @@ export function SuiteSkeletonCard({
   return (
     <div
       className={cn(
-        'ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-2xl border border-ph-border bg-ph-surface p-6 shadow-sm',
+        'ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-6',
         className,
       )}
       aria-hidden
@@ -75,7 +75,7 @@ export function SuiteSkeletonCard({
           className="mb-5 flex items-center gap-3 animate-[skeleton-stagger_0.5s_ease-out_both]"
           style={{ animationDelay: '100ms' }}
         >
-          <div className="ph-skeleton h-10 w-10 rounded-xl" />
+          <div className="ph-skeleton h-10 w-10 rounded-[var(--ph-radius-control)]" />
           <div className="flex-1 space-y-2">
             <div className="ph-skeleton h-4 w-1/3" />
             <div className="ph-skeleton h-3 w-1/2" />
@@ -115,8 +115,8 @@ export function SuiteSkeletonList({
           className="animate-[skeleton-stagger_0.6s_ease-out_both]"
           style={{ animationDelay: `${index * 100}ms` }}
         >
-          <div className="flex items-center gap-3 rounded-xl border border-ph-border bg-ph-surface p-4">
-            <div className="ph-skeleton h-10 w-10 rounded-lg" />
+          <div className="flex items-center gap-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-4">
+            <div className="ph-skeleton h-10 w-10 rounded-[var(--ph-radius-control)]" />
             <div className="min-w-0 flex-1 space-y-2">
               <div className="ph-skeleton h-3.5 w-3/4" />
               <div className="ph-skeleton h-3 w-1/2" />
@@ -152,7 +152,7 @@ export function SuiteEmptyState({
   return (
     <div
       className={cn(
-        'relative overflow-hidden rounded-2xl border border-ph-border bg-ph-surface text-center',
+        'relative overflow-hidden rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface text-center',
         size === 'sm' ? 'px-5 py-8' : 'px-6 py-12 sm:px-10 sm:py-16',
         className,
       )}
@@ -163,7 +163,7 @@ export function SuiteEmptyState({
       </div>
       <div className="relative">
         {icon ? (
-          <div className="mx-auto mb-4 inline-flex items-center justify-center rounded-2xl bg-ph-muted p-3 shadow-sm ring-1 ring-black/[0.06]">
+          <div className="mx-auto mb-4 inline-flex items-center justify-center rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-muted p-3 shadow-[var(--ph-shadow-control)]">
             {icon}
           </div>
         ) : null}

package/src/suite/components/suite-user-menu.tsx

@@ -148,7 +148,7 @@ export function SuiteUserMenu({
       className={cn(
         "[&_.ph-dropdown-trigger]:rounded-full",
         showDetails &&
-          "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-lg",
+          "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-[var(--ph-radius-control)]",
         showSignOutAction ? undefined : className,
       )}
       data-test={dataTest}
@@ -193,7 +193,7 @@ export function SuiteUserMenu({
         data-test={`${dataTest}-visible-sign-out`}
         title="Sign out"
         aria-label="Sign out"
-        className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring"
+        className="ph-btn ph-btn-ghost ph-btn-square h-10 w-10 shrink-0 text-ph-mutedtext"
         onClick={onSignOut}
       >
         <LogOut className="h-4 w-4" aria-hidden />

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

@@ -13,6 +13,7 @@ import {
 
 import { readCookie, writeCookie } from '../lib/cookies';
 import { SUITE_THEME_CHANNEL, SUITE_THEME_COOKIE } from '../lib/theme-cookie';
+import { trackSuiteEvent } from '../../lib/suite-analytics';
 
 export type SuiteTheme = 'system' | 'light' | 'dark';
 export type SuiteResolvedTheme = 'light' | 'dark';
@@ -271,6 +272,7 @@ export function SuiteThemeProvider({
       }
       writeSharedTheme(next);
       broadcastTheme(next);
+      trackSuiteEvent('Theme Updated', { theme: next, scope: 'suite' });
     },
     [config],
   );

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

@@ -30,7 +30,7 @@ export function TodayCalibrating({
   return (
     <div
       className={cn(
-        'suite-auth-handoff relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-ph-border bg-ph-surface px-5 py-8 text-center shadow-sm',
+        'suite-auth-handoff relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface px-5 py-8 text-center',
         className,
       )}
       data-test="today-calibrating"
@@ -39,7 +39,7 @@ export function TodayCalibrating({
         className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(251,191,36,0.1),transparent_55%)]"
         aria-hidden
       />
-      <div className="relative mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-ph-border bg-ph-surface text-ph-ink shadow-sm">
+      <div className="relative mb-5 flex h-14 w-14 items-center justify-center rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface text-ph-ink shadow-[var(--ph-shadow-control)]">
         <Sun className="h-8 w-8" strokeWidth={2} aria-hidden />
       </div>
       <h2 className="relative text-base font-semibold tracking-tight text-ph-ink sm:text-lg md:text-xl">
@@ -56,7 +56,7 @@ export function TodayCalibrating({
           type="button"
           onClick={onRetry}
           disabled={retrying}
-          className="relative mt-6 inline-flex items-center gap-2 rounded-xl border border-ph-border bg-ph-canvas px-4 py-2 text-sm font-medium text-ph-ink transition hover:bg-ph-muted disabled:opacity-60"
+          className="ph-btn ph-btn-secondary relative mt-6"
         >
           {retrying ? (
             <Spinner size="sm" className={retrySpinnerClassName} />