@xenide-io/the-old-ui-theme 0.9.17 → 0.10.0

package/src/suite/components/ai-panel.tsx

@@ -530,7 +530,7 @@ export function SuiteAiPanel({
             type="button"
             onClick={() => void handleClear()}
             disabled={waiting}
-            className="ml-auto inline-flex h-9 items-center gap-1.5 rounded-lg px-2 text-xs 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-focus disabled:opacity-40"
+            className="ph-btn ph-btn-ghost ph-btn-sm ml-auto h-9 text-xs text-ph-subtle"
             data-test="ask-ai-clear"
           >
             <Erase className="h-3.5 w-3.5" />
@@ -558,7 +558,7 @@ export function SuiteAiPanel({
 
           {!hydrating && messages.length === 0 && !error ? (
             <div className="mx-auto mt-4 flex max-w-sm flex-col items-center px-1 text-center">
-              <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-ph-brand/10 text-ph-brand">
+              <span className="flex h-10 w-10 items-center justify-center rounded-[var(--ph-radius-surface)] bg-ph-brand/10 text-ph-brand">
                 <Icon className="h-5 w-5" />
               </span>
               <p className="mt-3 font-display text-base font-semibold text-ph-ink">
@@ -575,7 +575,7 @@ export function SuiteAiPanel({
                       type="button"
                       onClick={() => void ask(preset.prompt)}
                       disabled={waiting || hydrating}
-                      className="group flex w-full items-center gap-2 rounded-xl border border-ph-border bg-ph-surface px-3 py-2 text-left text-sm text-ph-ink transition-colors hover:border-ph-brand/40 hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                      className="group flex w-full items-center gap-2 rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface px-3 py-2 text-left text-sm text-ph-ink transition-[background-color,border-color,box-shadow] hover:border-[var(--ph-selected-border)] hover:bg-[var(--ph-surface-hover)] focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)] disabled:opacity-40"
                     >
                       <Sparks className="h-4 w-4 shrink-0 text-ph-brand" />
                       <span className="min-w-0 flex-1 truncate">
@@ -620,7 +620,7 @@ export function SuiteAiPanel({
                         }}
                         rows={2}
                         data-test="ask-ai-edit-input"
-                        className="w-full resize-none rounded-2xl rounded-br-md border border-ph-border bg-ph-surface px-3 py-2 text-sm leading-relaxed text-ph-ink outline-none focus-visible:border-ph-brand/45 focus-visible:ring-2 focus-visible:ring-ph-focus/35"
+                        className="w-full resize-none rounded-2xl rounded-br-md border border-ph-border bg-ph-surface px-3 py-2 text-sm leading-relaxed text-ph-ink outline-none focus-visible:border-[var(--ph-selected-border)] focus-visible:shadow-[var(--ph-focus-halo)]"
                       />
                       <div className="flex justify-end gap-2">
                         <button
@@ -629,7 +629,7 @@ export function SuiteAiPanel({
                             setEditingIndex(null);
                             setEditDraft("");
                           }}
-                          className="inline-flex min-h-8 items-center rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                          className="ph-btn ph-btn-secondary ph-btn-xs"
                         >
                           Cancel
                         </button>
@@ -638,7 +638,7 @@ export function SuiteAiPanel({
                           data-test="ask-ai-edit-save"
                           disabled={!editDraft.trim() || waiting}
                           onClick={() => void saveEdit(index)}
-                          className="inline-flex min-h-8 items-center rounded-lg bg-ph-brand px-2.5 text-xs font-medium text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                          className="ph-btn ph-btn-primary ph-btn-xs"
                         >
                           Save
                         </button>
@@ -663,7 +663,7 @@ export function SuiteAiPanel({
                             copiedIndex === index ? "Copied" : "Copy message"
                           }
                           data-test="ask-ai-copy"
-                          className="flex h-7 w-7 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                          className="ph-btn ph-btn-ghost ph-btn-square ph-btn-xs h-7 w-7 text-ph-mutedtext"
                         >
                           {copiedIndex === index ? (
                             <Check className="h-3.5 w-3.5" />
@@ -679,7 +679,7 @@ export function SuiteAiPanel({
                           }}
                           aria-label="Edit message"
                           data-test="ask-ai-edit"
-                          className="flex h-7 w-7 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                          className="ph-btn ph-btn-ghost ph-btn-square ph-btn-xs h-7 w-7 text-ph-mutedtext"
                         >
                           <EditPencil className="h-3.5 w-3.5" />
                         </button>
@@ -727,7 +727,7 @@ export function SuiteAiPanel({
                       key={action.id}
                       data-test="ask-ai-action"
                       data-status={action.status}
-                      className="rounded-xl border border-ph-border bg-ph-surface px-3 py-2 text-sm text-ph-ink"
+                      className="rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface px-3 py-2 text-sm text-ph-ink"
                     >
                       <p className="font-medium">{action.summary}</p>
                       {action.status === "proposed" ? (
@@ -737,7 +737,7 @@ export function SuiteAiPanel({
                             data-test="ask-ai-action-confirm"
                             disabled={Boolean(resolvingId) || !resolveAction}
                             onClick={() => void handleResolve(action.id, "confirm")}
-                            className="inline-flex min-h-8 items-center rounded-lg bg-ph-brand px-2.5 text-xs font-medium text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                            className="ph-btn ph-btn-primary ph-btn-xs"
                           >
                             {resolvingId === action.id ? "Working…" : "Confirm"}
                           </button>
@@ -746,7 +746,7 @@ export function SuiteAiPanel({
                             data-test="ask-ai-action-cancel"
                             disabled={Boolean(resolvingId) || !resolveAction}
                             onClick={() => void handleResolve(action.id, "cancel")}
-                            className="inline-flex min-h-8 items-center rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                            className="ph-btn ph-btn-secondary ph-btn-xs"
                           >
                             Cancel
                           </button>
@@ -805,7 +805,7 @@ export function SuiteAiPanel({
           {error ? (
             <div
               role="alert"
-              className="flex items-start gap-2 rounded-xl border border-ph-danger/30 bg-ph-danger/10 px-3 py-2.5 text-sm text-ph-ink"
+              className="flex items-start gap-2 rounded-[var(--ph-radius-surface)] border border-ph-danger/30 bg-ph-danger/10 px-3 py-2.5 text-sm text-ph-ink"
             >
               <WarningTriangle className="mt-0.5 h-4 w-4 shrink-0 text-ph-danger" />
               <div className="min-w-0 flex-1">
@@ -815,7 +815,7 @@ export function SuiteAiPanel({
                   type="button"
                   onClick={retry}
                   disabled={waiting}
-                  className="mt-2 inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                  className="ph-btn ph-btn-secondary ph-btn-xs mt-2 gap-1.5"
                 >
                   Try again
                 </button>
@@ -830,7 +830,7 @@ export function SuiteAiPanel({
               <button
                 type="button"
                 onClick={() => scrollToBottom("smooth")}
-                className="flex h-9 w-9 items-center justify-center rounded-full border border-ph-border bg-ph-surface text-ph-subtle shadow-ph-md transition-colors hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                className="ph-btn ph-btn-ghost ph-btn-circle h-9 w-9 border border-ph-border bg-ph-surface text-ph-subtle shadow-[var(--ph-shadow-floating)]"
                 aria-label="Scroll to latest"
               >
                 <ArrowDown className="h-4 w-4" />
@@ -841,7 +841,7 @@ export function SuiteAiPanel({
       </div>
 
       <div className="px-2 pt-2 pb-[max(2rem,calc(env(safe-area-inset-bottom)+1rem))]">
-        <div className="flex items-end gap-1.5 rounded-2xl border border-ph-border bg-ph-surface px-1.5 py-1 transition-colors focus-within:border-ph-brand/45 focus-within:ring-2 focus-within:ring-ph-focus/35">
+        <div className="suite-ai-composer flex items-end gap-1.5 border bg-ph-surface px-1.5 py-1">
           <label htmlFor={inputId} className="sr-only">
             Ask a question
           </label>
@@ -871,7 +871,7 @@ export function SuiteAiPanel({
                 type="button"
                 onClick={stop}
                 data-test="ask-ai-stop"
-                className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ph-muted text-ph-ink transition-colors hover:bg-ph-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                className="ph-btn ph-btn-ghost ph-btn-circle h-9 w-9 shrink-0 bg-ph-muted text-ph-ink"
                 aria-label="Stop generating"
               >
                 <Square className="h-3.5 w-3.5 fill-current" />
@@ -884,7 +884,7 @@ export function SuiteAiPanel({
                 onClick={() => void ask(prompt)}
                 disabled={!prompt.trim()}
                 data-test="ask-ai-send"
-                className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ph-brand text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                className="ph-btn ph-btn-primary ph-btn-circle h-9 w-9 shrink-0"
                 aria-label="Send message"
               >
                 <ArrowUp className="h-4 w-4" />

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

@@ -12,20 +12,20 @@ import type {
 
 export function appSwitcherTriggerClass(open: boolean, collapsed = false) {
   return cn(
-    "group flex min-w-0 items-center gap-2 rounded-lg border px-2 py-1.5 text-left transition-all duration-200",
+    "group flex min-w-0 items-center gap-2 rounded-[var(--ph-radius-control)] border px-2 py-1.5 text-left transition-[color,background-color,border-color,box-shadow] duration-150",
     collapsed ? "h-11 w-11 justify-center px-0 py-0" : "w-full",
     open
-      ? "border-ph-brand/30 bg-ph-muted shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-ph-brand/15"
-      : "border-transparent hover:border-ph-border hover:bg-ph-muted/80 hover:shadow-sm",
+      ? "border-[var(--ph-selected-border)] bg-[var(--ph-selected-bg)] shadow-[var(--ph-shadow-control)]"
+      : "border-transparent hover:border-ph-border hover:bg-[var(--ph-surface-hover)]",
   );
 }
 
 export function appSwitcherMarkClass() {
-  return "h-8 w-8 shrink-0 rounded-lg";
+  return "h-8 w-8 shrink-0 rounded-[var(--ph-radius-control)]";
 }
 
 export function appSwitcherMenuItemClass() {
-  return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80 focus-visible:shadow-none";
+  return "px-2 py-2";
 }
 
 export function AppSwitcherMark({
@@ -58,7 +58,7 @@ export function AppSwitcherChevron({
     return (
       <span
         className={cn(
-          "absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface shadow-sm transition-colors",
+          "absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface transition-colors",
           open && "border-ph-brand/40 bg-ph-brand/10",
         )}
         aria-hidden
@@ -76,7 +76,7 @@ export function AppSwitcherChevron({
   return (
     <span
       className={cn(
-        "border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-lg border bg-ph-canvas shadow-sm transition-all duration-200",
+        "border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-[var(--ph-radius-control)] border bg-ph-canvas transition-[color,background-color,border-color] duration-150",
         open
           ? "border-ph-brand/35 bg-ph-brand/10 text-ph-brand"
           : "text-ph-mutedtext group-hover:border-ph-border group-hover:bg-ph-surface",
@@ -160,7 +160,7 @@ export function AppSwitcher({
       }
     >
       <div id="app-switcher-menu" className="p-1" data-test="app-switcher-menu">
-        <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
+        <p className="px-3 py-2 text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-[0.08em] text-ph-mutedtext">
           Switch application
         </p>
         {apps
@@ -204,7 +204,7 @@ export function AppSwitcher({
                   setOpen(false);
                   onSelect(app, { newTab: true });
                 }}
-                className="absolute right-1.5 top-1/2 z-[1] flex h-8 -translate-y-1/2 justify-center rounded-md p-0 text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:shadow-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35"
+                className="absolute right-1.5 top-1/2 z-[1] flex h-8 -translate-y-1/2 justify-center p-0 text-ph-mutedtext"
                 style={{ width: "2rem" }}
               >
                 <OpenNewWindow className="h-4 w-4" aria-hidden="true" />

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

@@ -59,7 +59,7 @@ export function SuiteAppLayout({
     >
       <aside
         aria-label="Sidebar"
-        className="relative hidden shrink-0 flex-col overflow-visible border-r border-ph-border ease-out lg:flex"
+        className="suite-app-layout__sidebar relative hidden shrink-0 flex-col overflow-visible border-r ease-out lg:flex"
         style={{ width: `${sidebarWidth}px` }}
         data-collapsed={collapsed ? "true" : "false"}
       >
@@ -81,7 +81,10 @@ export function SuiteAppLayout({
             onKeyDown={(event) => {
               if (event.key === "Home") {
                 event.preventDefault();
-                onResetWidth?.();
+                onResizeBy?.(SIDEBAR_RAIL_WIDTH - sidebarWidth);
+              } else if (event.key === "End") {
+                event.preventDefault();
+                onResizeBy?.(SIDEBAR_MAX_WIDTH - sidebarWidth);
               } else if (event.key === "ArrowLeft") {
                 event.preventDefault();
                 onResizeBy?.(-16);
@@ -90,7 +93,7 @@ export function SuiteAppLayout({
                 onResizeBy?.(16);
               }
             }}
-            className="absolute inset-y-0 right-0 z-20 w-2 cursor-col-resize touch-none transition-colors before:absolute before:-left-2 before:-right-2 before:inset-y-0 before:content-[''] hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+            className="suite-sidebar-resize-handle absolute inset-y-0 right-0 z-20 w-2 cursor-col-resize touch-none before:absolute before:-left-2 before:-right-2 before:inset-y-0 before:content-['']"
           />
         ) : null}
       </aside>
@@ -104,7 +107,7 @@ export function SuiteAppLayout({
           tabIndex={0}
           data-lock-scroll={lockMainScroll ? "true" : undefined}
           className={cn(
-            "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-focus",
+            "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none",
             "suite-app-layout__main",
             lockMainScroll ? "overflow-hidden" : "overflow-y-auto",
           )}

package/src/suite/components/suite-bottom-nav.tsx

@@ -89,7 +89,7 @@ export function SuiteBottomNav({
               }
               aria-current={active ? "page" : undefined}
               className={cn(
-                "suite-bottom-nav__item relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1 px-1 pb-1.5 pt-2 text-[10px] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-brand motion-reduce:transition-none",
+                "suite-bottom-nav__item relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1 px-1 pb-1.5 pt-2 text-[length:var(--ph-type-overline)] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_color-mix(in_oklab,var(--ph-focus-ring)_30%,transparent)] motion-reduce:transition-none",
                 active && "font-semibold text-ph-brand",
               )}
             >

package/src/suite/components/suite-clients-projects-directory.tsx

@@ -117,7 +117,7 @@ function DirectoryIconPicker({
   return (
     <div className="space-y-2">
       <span className="mb-1.5 block text-sm font-medium text-ph-ink">Icon</span>
-      <div className="rounded-lg border border-ph-border bg-ph-muted p-3">
+      <div className="rounded-[var(--ph-radius-surface)] border border-ph-border bg-[var(--ph-surface-inset)] p-3">
         <div className="flex items-center gap-3">
           <SuiteEntityIcon
             imageUrl={preview}
@@ -178,7 +178,7 @@ function DirectoryIcon({
       color={item.color}
       tinted
       className="h-8 w-8 text-sm"
-      roundedClass="rounded-lg"
+      roundedClass="rounded-[var(--ph-radius-control)]"
     />
   );
 }
@@ -458,7 +458,7 @@ export function SuiteClientsProjectsDirectory({
       {loading ? (
         <p className="text-sm text-ph-mutedtext">Loading directory...</p>
       ) : (
-        <div className="overflow-hidden rounded-xl border border-ph-border bg-ph-surface lg:grid lg:min-h-[22rem] lg:grid-cols-[minmax(14rem,18rem)_1fr]">
+        <div className="overflow-hidden rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface lg:grid lg:min-h-[22rem] lg:grid-cols-[minmax(14rem,18rem)_1fr]">
           <section
             className={cn(
               "border-ph-border lg:border-r",
@@ -515,7 +515,7 @@ export function SuiteClientsProjectsDirectory({
                           clientButtonRefs.current[client.id] = element;
                         }}
                         className={cn(
-                          "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left",
+                          "flex w-full items-center gap-2.5 rounded-[var(--ph-radius-control)] px-2.5 py-2 text-left",
                           selected ? "bg-ph-muted" : "hover:bg-ph-canvas",
                         )}
                       >
@@ -627,12 +627,12 @@ export function SuiteClientsProjectsDirectory({
                 selectedProjects.map((project) => (
                   <li key={project.id}>
                     <div
-                      className="flex items-center gap-3 rounded-lg px-2 py-1 hover:bg-ph-canvas"
+                      className="flex items-center gap-3 rounded-[var(--ph-radius-control)] px-2 py-1 hover:bg-ph-canvas"
                       onClick={() => openEdit(project, "project")}
                     >
                       <button
                         type="button"
-                        className="flex min-w-0 flex-1 items-center gap-3 rounded-lg py-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+                        className="flex min-w-0 flex-1 items-center gap-3 rounded-[var(--ph-radius-control)] py-1 text-left focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]"
                         onClick={() => openEdit(project, "project")}
                       >
                         <DirectoryIcon item={project} />

package/src/suite/components/suite-entity-icon.tsx

@@ -50,7 +50,7 @@ export function SuiteEntityIcon({
         }}
       >
         {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src={src ?? undefined} alt="" className="h-full w-full object-cover" />
+        <img src={src ?? undefined} alt="" className="h-full w-full object-contain" />
       </span>
     );
   }
@@ -71,8 +71,8 @@ export function SuiteEntityIcon({
       title={label ?? undefined}
     >
       <Folder
-        className="h-[70%] w-[70%]"
-        strokeWidth={1.6}
+        className="h-[88%] w-[88%]"
+        strokeWidth={1.8}
         aria-hidden
       />
     </span>

package/src/suite/components/suite-integration-picker.tsx

@@ -91,7 +91,7 @@ const DESCRIPTION_LIMIT = 90;
 function IntegrationSkeletonCard() {
   return (
     <div
-      className="flex min-h-36 min-w-0 animate-pulse flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4"
+      className="flex min-h-36 min-w-0 animate-pulse flex-col justify-between rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-4"
       aria-hidden="true"
     >
       <div className="flex items-start gap-3">
@@ -608,7 +608,7 @@ export function SuiteIntegrationPicker({
               </button>
               {categoryMenuOpen ? (
                 <div
-                  className="absolute z-20 mt-2 max-h-[min(22rem,calc(100dvh-12rem))] w-full max-w-full overflow-hidden rounded-lg border border-ph-border bg-ph-surface p-2 shadow-lg"
+                  className="absolute z-20 mt-2 max-h-[min(22rem,calc(100dvh-12rem))] w-full max-w-full overflow-hidden rounded-[var(--ph-radius-overlay)] border border-[var(--ph-border-control)] bg-[var(--ph-surface-overlay)] p-2 shadow-[var(--ph-shadow-floating)]"
                 >
                   <Input
                     ref={categorySearchRef}
@@ -643,7 +643,7 @@ export function SuiteIntegrationPicker({
                         ref={(element) => {
                           categoryOptionRefs.current[value] = element;
                         }}
-                        className={`flex w-full min-w-0 items-center rounded-md px-3 py-2 text-left text-sm break-words ${activeCategory === value ? "bg-ph-brand text-[var(--ph-on-accent)]" : "text-ph-ink hover:bg-ph-muted"}`}
+                        className={`flex w-full min-w-0 items-center rounded-[var(--ph-radius-control)] px-3 py-2 text-left text-sm break-words focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)] ${activeCategory === value ? "bg-[var(--ph-selected-bg)] text-[var(--ph-selected-text)] shadow-[inset_0_0_0_1px_var(--ph-selected-border)]" : "text-ph-ink hover:bg-[var(--ph-surface-hover)]"}`}
                         onClick={() => selectCategory(value)}
                         onKeyDown={(event) => {
                           if (event.key === "Escape") {
@@ -692,7 +692,7 @@ export function SuiteIntegrationPicker({
                   return (
                     <div
                       key={item.id}
-                      className="flex min-h-36 min-w-0 flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4"
+                      className="flex min-h-36 min-w-0 flex-col justify-between rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-4"
                     >
                       <button
                         type="button"
@@ -701,7 +701,7 @@ export function SuiteIntegrationPicker({
                           longDescription &&
                           setExpanded(isExpanded ? null : item.id)
                         }
-                        aria-expanded={isExpanded}
+                        aria-expanded={longDescription ? isExpanded : undefined}
                       >
                         <span className="flex items-start gap-3">
                           <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-ph-muted text-ph-ink">
@@ -801,7 +801,7 @@ export function SuiteIntegrationPicker({
               {connectedItems.map((item) => (
                 <div
                   key={item.id}
-                  className="flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted p-3"
+                  className="flex items-center justify-between gap-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-[var(--ph-surface-inset)] p-3"
                 >
                   <span className="flex min-w-0 items-center gap-2 text-sm text-ph-ink">
                     {item.icon}
@@ -885,7 +885,7 @@ export function SuiteIntegrationPicker({
               <button
                 key={scheme}
                 type="button"
-                className="flex w-full items-center justify-between rounded-lg border border-ph-border bg-ph-surface px-3 py-3 text-left text-sm text-ph-ink transition hover:border-ph-brand hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+                className="flex w-full items-center justify-between rounded-[var(--ph-radius-control)] border border-ph-border bg-ph-surface px-3 py-3 text-left text-sm text-ph-ink transition-[background-color,border-color,box-shadow] hover:border-[var(--ph-selected-border)] hover:bg-[var(--ph-surface-hover)] focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]"
                 onClick={() => void prepareConnection(methodItem, scheme)}
                 data-test={`${dataTest}-choose-${scheme.toLowerCase()}`}
               >

package/src/suite/components/suite-integration-rules.tsx

@@ -221,7 +221,7 @@ export function SuiteIntegrationRules({
           <p className="mt-4 text-sm text-ph-subtle">Loading rules...</p>
         ) : rules.length === 0 ? (
           <div
-            className="mt-4 rounded-lg border border-dashed border-ph-border px-4 py-6 text-center"
+            className="mt-4 rounded-[var(--ph-radius-surface)] border border-dashed border-ph-border bg-[var(--ph-surface-inset)] px-4 py-6 text-center"
             data-test={`${dataTest}-empty`}
           >
             <p className="text-sm text-ph-subtle">
@@ -234,7 +234,7 @@ export function SuiteIntegrationRules({
             {rules.map((rule) => (
               <li
                 key={rule.id}
-                className="flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted px-3 py-3"
+                className="flex items-center justify-between gap-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-[var(--ph-surface-inset)] px-3 py-3"
                 data-test={`${dataTest}-rule-${rule.id}`}
               >
                 <div className="min-w-0">
@@ -282,7 +282,7 @@ export function SuiteIntegrationRules({
 
         {canManage && formOpen && onCreate ? (
           <form
-            className="mt-4 space-y-3 rounded-lg border border-ph-border bg-ph-surface p-4"
+            className="mt-4 space-y-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-4"
             onSubmit={(event) => void submitForm(event)}
             data-test={`${dataTest}-form`}
           >
@@ -435,7 +435,7 @@ export function SuiteIntegrationRules({
         </p>
         {events.length === 0 ? (
           <p
-            className="mt-4 rounded-lg border border-dashed border-ph-border px-4 py-6 text-center text-sm text-ph-subtle"
+            className="mt-4 rounded-[var(--ph-radius-surface)] border border-dashed border-ph-border bg-[var(--ph-surface-inset)] px-4 py-6 text-center text-sm text-ph-subtle"
             data-test={`${dataTest}-events-empty`}
           >
             No integration events yet.
@@ -445,7 +445,7 @@ export function SuiteIntegrationRules({
             {events.map((event) => (
               <li
                 key={event.id}
-                className="flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted px-3 py-2"
+                className="flex items-center justify-between gap-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-[var(--ph-surface-inset)] px-3 py-2"
               >
                 <div className="min-w-0">
                   <p className="truncate text-sm text-ph-ink">

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

@@ -1,7 +1,11 @@
-import { cleanup, render, screen, within } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
-import { sidebarColumnWidth } from "../lib/use-sidebar-width";
+import {
+  SIDEBAR_MAX_WIDTH,
+  SIDEBAR_RAIL_WIDTH,
+  sidebarColumnWidth,
+} from "../lib/use-sidebar-width";
 import { SuiteAppLayout } from "./suite-app-layout";
 import { SuitePageHeader } from "./suite-layout";
 
@@ -36,6 +40,31 @@ describe("sidebar resize handle", () => {
     expect(handle?.previousElementSibling).toHaveClass("isolate");
     expect(handle).toHaveClass("z-20");
   });
+
+  it("supports range-style keyboard minimum, maximum, and steps", () => {
+    const onResizeBy = vi.fn();
+    render(
+      <SuiteAppLayout
+        sidebarWidth={240}
+        onStartResize={() => {}}
+        onResizeBy={onResizeBy}
+        sidebar={<div>Sidebar</div>}
+      >
+        Page
+      </SuiteAppLayout>,
+    );
+
+    const handle = screen.getByRole("separator", { name: "Resize sidebar" });
+    fireEvent.keyDown(handle, { key: "Home" });
+    fireEvent.keyDown(handle, { key: "End" });
+    fireEvent.keyDown(handle, { key: "ArrowLeft" });
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+
+    expect(onResizeBy).toHaveBeenNthCalledWith(1, SIDEBAR_RAIL_WIDTH - 240);
+    expect(onResizeBy).toHaveBeenNthCalledWith(2, SIDEBAR_MAX_WIDTH - 240);
+    expect(onResizeBy).toHaveBeenNthCalledWith(3, -16);
+    expect(onResizeBy).toHaveBeenNthCalledWith(4, 16);
+  });
 });
 
 describe("suite scroll ownership", () => {

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

@@ -192,7 +192,7 @@ export function SuitePageHeader({
       data-test={dataTest}
       data-stuck={sticky ? (stuck ? 'true' : 'false') : undefined}
       className={cn(
-        'flex min-w-0 shrink-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3',
+        'suite-page-header flex min-w-0 shrink-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3',
         // No extra pt here — page inset sets the shared title baseline.
         sticky && 'suite-page-header-sticky',
         className,
@@ -213,7 +213,7 @@ export function SuitePageHeader({
         <div className="flex min-w-0 items-center gap-3">
           {resolvedIcon ? (
             <div
-              className="hidden shrink-0 sm:flex sm:items-center [&_svg]:h-6 [&_svg]:w-6"
+              className="suite-page-header__icon hidden shrink-0 sm:flex sm:items-center [&_svg]:h-6 [&_svg]:w-6"
               aria-hidden="true"
             >
               {resolvedIcon}
@@ -222,14 +222,14 @@ export function SuitePageHeader({
           <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
             <h1
               className={cn(
-                'min-w-0 break-words font-display text-[1.375rem] font-semibold leading-tight tracking-tight text-ph-ink text-balance sm:text-2xl',
+                'ph-page-title min-w-0 break-words font-display font-semibold text-ph-ink text-balance',
                 titleClassName,
               )}
             >
               {title}
             </h1>
             {badge ? (
-              <span className="rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle">
+              <span className="rounded-[var(--ph-radius-control)] bg-ph-muted px-2 py-0.5 text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-wide text-ph-subtle">
                 {badge}
               </span>
             ) : null}

package/src/suite/components/suite-mobile-drawer.tsx

@@ -98,7 +98,7 @@ export function SuiteMobileDrawer({
             data-test={panelDataTest}
             aria-modal="true"
             className={cn(
-              "fixed inset-y-0 left-0 z-50 flex h-dvh max-h-dvh w-[86%] max-w-72 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast lg:hidden",
+              "fixed inset-y-0 left-0 z-50 flex h-dvh max-h-dvh w-[86%] max-w-72 flex-col overflow-hidden border-r border-ph-border bg-ph-surface shadow-[var(--ph-shadow-floating)] outline-none motion-safe:transition-transform motion-safe:ease-spring-fast lg:hidden",
               side === "right" && "left-auto right-0",
               shown
                 ? "translate-x-0"
@@ -127,7 +127,7 @@ export function SuiteMobileDrawer({
                     type="button"
                     id={closeButtonId}
                     data-test={closeButtonDataTest}
-                    className="-mr-1.5 inline-flex h-11 w-11 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+                    className="ph-btn ph-btn-ghost ph-btn-square -mr-1.5 h-11 w-11 text-ph-mutedtext"
                     aria-label={closeLabel}
                   >
                     <X className="h-4 w-4" aria-hidden />

package/src/suite/components/suite-mobile-header.tsx

@@ -54,7 +54,7 @@ export function SuiteMobileHeader({
           type="button"
           id={menuId}
           data-test={menuDataTest}
-          className="suite-press inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+          className="ph-btn ph-btn-ghost ph-btn-square suite-press h-11 w-11 shrink-0 text-ph-ink"
           onClick={onMenuClick}
           aria-label={menuLabel}
         >

package/src/suite/components/suite-notification-bell.tsx

@@ -65,7 +65,7 @@ export function SuiteNotificationBell({
       open={open}
       onOpenChange={onOpenChange}
       trigger={
-        <span className="relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
+        <span className="relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink">
           <span className="relative inline-flex h-5 w-5">
             <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
             {unread > 0 ? (
@@ -85,7 +85,7 @@ export function SuiteNotificationBell({
             id={`${dataTest}-mark-all`}
             data-test={`${dataTest}-mark-all`}
             onClick={markAllRead}
-            className="text-xs font-medium text-ph-brand hover:underline"
+            className="ph-btn ph-btn-link ph-btn-xs text-xs"
           >
             Mark all read
           </button>
@@ -106,7 +106,7 @@ export function SuiteNotificationBell({
                 setOpen(false);
                 select(n);
               }}
-              className="flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted"
+              className="ph-dropdown-item flex w-full flex-col items-stretch gap-0.5 px-3 py-2 text-left"
             >
               <span className="flex items-center gap-2">
                 {!n.read_at ? (
@@ -124,7 +124,7 @@ export function SuiteNotificationBell({
                   {n.body}
                 </span>
               ) : null}
-              <span className="text-[11px] uppercase tracking-wide text-ph-subtle">
+              <span className="text-xs text-ph-subtle">
                 {n.source_app} · {timeAgo(n.created_at)}
               </span>
             </button>