From b53aeb6f95cc3ab0fc27e905a4f6709a96cf3c04 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 6 Oct 2026 16:37:52 +0200
Subject: [PATCH 1/5] fix: Keep Chrome Surfaces and Destructive Confirms
 Legible in a Quiet-Chrome Theme

---
 client/src/components/Chat/Header.tsx         |  2 +-
 .../ConvoOptions/SharedLinkButton.tsx         |  2 +-
 .../Input/SetKeyDialog/SetKeyDialog.tsx       |  2 +-
 .../components/MCP/CustomUserVarsSection.tsx  |  2 +-
 .../MCP/ServerInitializationSection.tsx       |  2 +-
 .../components/Messages/ScrollToBottom.tsx    |  4 ++--
 client/src/components/Nav/SearchBar.tsx       |  2 +-
 .../Nav/SettingsTabs/Data/ClearChats.tsx      |  2 +-
 .../Prompts/dialogs/DeletePrompt.tsx          |  2 +-
 .../SidePanel/Agents/Tools/ActionEditor.tsx   |  2 +-
 .../MCPBuilder/MCPServerDialog/index.tsx      |  4 ++--
 eslint-suppressions.json                      |  2 +-
 .../client/src/components/Button.spec.tsx     | 19 ++++++++++++++++++-
 packages/client/src/components/Button.tsx     | 16 ++++++++++++++++
 packages/client/src/theme/README.md           |  5 ++++-
 packages/client/src/theme/tokens.css          | 12 ++++++++++++
 16 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx
index 8d50f6f122b..d41a0149a12 100644
--- a/client/src/components/Chat/Header.tsx
+++ b/client/src/components/Chat/Header.tsx
@@ -84,7 +84,7 @@ function Header({
   return (
     /* The composer review is in a z-10 stacking context. Keep header controls
        above it when a tall review reaches the top of a short viewport. */
-    <div className="from-surface-canvas via-surface-canvas/70 text-text-primary md:from-surface-canvas/80 md:via-surface-canvas/50 2xl:from-surface-canvas/0 absolute top-0 z-20 flex h-[3.25rem] w-full items-center gap-2 bg-gradient-to-b to-transparent p-2 font-semibold 2xl:via-transparent">
+    <div className="from-surface-canvas via-surface-canvas/70 text-text-primary md:from-surface-canvas/80 md:via-surface-canvas/50 2xl:from-surface-canvas/0 theme-chrome-quiet:bg-surface-canvas theme-chrome-quiet:bg-none absolute top-0 z-20 flex h-[3.25rem] w-full items-center gap-2 bg-gradient-to-b to-transparent p-2 font-semibold 2xl:via-transparent">
       <div className={cn('flex-shrink-0 items-center', isSmallScreen ? 'flex' : 'hidden')}>
         <OpenSidebar testId="header-open-sidebar-button" />
       </div>
diff --git a/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx b/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
index 33390e4c7ff..126fad72e01 100644
--- a/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
@@ -375,7 +375,7 @@ export default function SharedLinkButton({
                     ref={deleteButtonRef}
                     type="button"
                     onClick={() => setShowDeleteDialog(true)}
-                    variant="destructive"
+                    variant="destructive-soft"
                     size="icon"
                     className="size-9 sm:size-10"
                     aria-label={localize('com_ui_delete_link')}
diff --git a/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx b/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
index eebab23b98b..5f05e6a0d57 100644
--- a/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
+++ b/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
@@ -112,7 +112,7 @@ const RevokeKeysButton = ({
       <OGDialog open={open} onOpenChange={setOpen}>
         <OGDialogTrigger asChild>
           <Button
-            variant="destructive"
+            variant="destructive-soft"
             className="flex items-center justify-center duration-200"
             onClick={() => setOpen(true)}
             disabled={disabled}
diff --git a/client/src/components/MCP/CustomUserVarsSection.tsx b/client/src/components/MCP/CustomUserVarsSection.tsx
index f611c0a0a26..827f88c2d25 100644
--- a/client/src/components/MCP/CustomUserVarsSection.tsx
+++ b/client/src/components/MCP/CustomUserVarsSection.tsx
@@ -174,7 +174,7 @@ export default function CustomUserVarsSection({
       <div className="flex justify-end gap-2">
         <Button
           type="button"
-          variant="destructive"
+          variant="destructive-soft"
           disabled={isSubmitting}
           onClick={handleRevokeClick}
         >
diff --git a/client/src/components/MCP/ServerInitializationSection.tsx b/client/src/components/MCP/ServerInitializationSection.tsx
index 5adf98b3069..f050751ee1f 100644
--- a/client/src/components/MCP/ServerInitializationSection.tsx
+++ b/client/src/components/MCP/ServerInitializationSection.tsx
@@ -132,7 +132,7 @@ export default function ServerInitializationSection({
       {shouldShowRevoke && (
         <Button
           size="sm"
-          variant="destructive"
+          variant="destructive-soft"
           onClick={() => revokeOAuthForServer?.(serverName)}
           aria-label={localize('com_ui_revoke')}
         >
diff --git a/client/src/components/Messages/ScrollToBottom.tsx b/client/src/components/Messages/ScrollToBottom.tsx
index 5c16ae865d3..4ccd3d2f15f 100644
--- a/client/src/components/Messages/ScrollToBottom.tsx
+++ b/client/src/components/Messages/ScrollToBottom.tsx
@@ -47,14 +47,14 @@ const ScrollToBottom = forwardRef<HTMLDivElement, Props>(
         >
           <Button
             type="button"
-            variant="outline"
+            variant="floating"
             size="icon-theme"
             shape="round"
             onClick={scrollHandler}
             disabled={!interactive}
             aria-label={localize('com_ui_scroll_to_bottom')}
             className={cn(
-              'me-2 bg-surface-chat/90 text-text-primary active:scale-[0.96] motion-reduce:active:scale-100',
+              'me-2 active:scale-[0.96] motion-reduce:active:scale-100',
               /* The wrapper owns the fade, so being briefly unreachable must not
                  dim the control on its way in on top of it. */
               'disabled:opacity-100',
diff --git a/client/src/components/Nav/SearchBar.tsx b/client/src/components/Nav/SearchBar.tsx
index 5d705e56087..041c45035f2 100644
--- a/client/src/components/Nav/SearchBar.tsx
+++ b/client/src/components/Nav/SearchBar.tsx
@@ -166,7 +166,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
        *
        *  No edge on focus, by request. What marks the focused field is its caret and
        *  the chord appearing in the trailing slot. */
-      className="group bg-surface-search text-text-primary flex h-9 min-w-0 flex-1 cursor-text items-center gap-2 rounded-lg pr-1 pl-2.5"
+      className="group bg-surface-search text-text-primary theme-field-fill:border theme-field-fill:border-border-control flex h-9 min-w-0 flex-1 cursor-text items-center gap-2 rounded-lg pr-1 pl-2.5"
     >
       <Search aria-hidden="true" className="text-text-secondary size-4 shrink-0" />
       <input
diff --git a/client/src/components/Nav/SettingsTabs/Data/ClearChats.tsx b/client/src/components/Nav/SettingsTabs/Data/ClearChats.tsx
index ed1cec0f44e..e5ba6414cbb 100644
--- a/client/src/components/Nav/SettingsTabs/Data/ClearChats.tsx
+++ b/client/src/components/Nav/SettingsTabs/Data/ClearChats.tsx
@@ -36,7 +36,7 @@ export const ClearChats = () => {
         <OGDialogTrigger asChild>
           <Button
             aria-labelledby="clear-all-chats-label"
-            variant="destructive"
+            variant="destructive-soft"
             onClick={() => setOpen(true)}
           >
             {localize('com_ui_delete')}
diff --git a/client/src/components/Prompts/dialogs/DeletePrompt.tsx b/client/src/components/Prompts/dialogs/DeletePrompt.tsx
index dcc6a42ccee..90333fab11d 100644
--- a/client/src/components/Prompts/dialogs/DeletePrompt.tsx
+++ b/client/src/components/Prompts/dialogs/DeletePrompt.tsx
@@ -29,7 +29,7 @@ const DeleteConfirmDialog = ({
           side="bottom"
           render={
             <Button
-              variant="destructive"
+              variant="destructive-soft"
               size="icon"
               aria-label={localize('com_ui_delete')}
               disabled={disabled}
diff --git a/client/src/components/SidePanel/Agents/Tools/ActionEditor.tsx b/client/src/components/SidePanel/Agents/Tools/ActionEditor.tsx
index 33aa4b1ed1b..a73ac81151e 100644
--- a/client/src/components/SidePanel/Agents/Tools/ActionEditor.tsx
+++ b/client/src/components/SidePanel/Agents/Tools/ActionEditor.tsx
@@ -100,7 +100,7 @@ export default function ActionEditor({
       <OGDialogTrigger asChild>
         <Button
           type="button"
-          variant="destructive"
+          variant="destructive-soft"
           size="icon"
           disabled={isEphemeralAgent(agentId) || !action.action_id}
           aria-label={localize('com_ui_delete_action')}
diff --git a/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/index.tsx b/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/index.tsx
index f687be18ba3..29813fe82db 100644
--- a/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/index.tsx
+++ b/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/index.tsx
@@ -158,7 +158,7 @@ export default function MCPServerDialog({
                   type="text"
                   readOnly
                   value={redirectUri}
-                  className="flex-1 text-text-secondary"
+                  className="text-text-secondary flex-1"
                 />
                 <Button
                   size="icon"
@@ -214,7 +214,7 @@ export default function MCPServerDialog({
             isEditMode ? (
               <div className="flex items-center gap-2">
                 <Button
-                  variant="destructive"
+                  variant="destructive-soft"
                   size="sm"
                   aria-label={localize('com_ui_delete_mcp_server_name', {
                     0: server?.config?.title || server?.serverName || '',
diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index f8d8b91e99d..9535f43afb1 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -987,7 +987,7 @@
   },
   "client/src/components/Messages/ScrollToBottom.tsx": {
     "shadcn/no-restyle": {
-      "count": 3
+      "count": 1
     }
   },
   "client/src/components/Nav/AccountSettings.tsx": {
diff --git a/packages/client/src/components/Button.spec.tsx b/packages/client/src/components/Button.spec.tsx
index 9c83ec73652..115d98aa5d9 100644
--- a/packages/client/src/components/Button.spec.tsx
+++ b/packages/client/src/components/Button.spec.tsx
@@ -10,9 +10,17 @@ jest.mock('react-i18next', () => ({
 }));
 
 describe('Button', () => {
-  it('paints a destructive button solid and tints it only when the theme asks', () => {
+  it('keeps a confirming destructive button solid in every theme', () => {
     const destructive = cn(buttonVariants({ variant: 'destructive' }));
 
+    expect(destructive).toContain('bg-surface-destructive');
+    expect(destructive).toContain('text-text-on-status');
+    expect(destructive).not.toContain('theme-destructive-soft:');
+  });
+
+  it('paints an inline destructive button solid and tints it only when the theme asks', () => {
+    const destructive = cn(buttonVariants({ variant: 'destructive-soft' }));
+
     expect(destructive).toContain('bg-surface-destructive');
     expect(destructive).toContain('text-text-on-status');
     expect(destructive).toContain('theme-destructive-soft:bg-surface-destructive/10');
@@ -54,6 +62,15 @@ describe('Button', () => {
     expect(cn(buttonVariants({ variant: 'toolbar' }))).not.toContain('py-2');
   });
 
+  it('gives a floating control a surface only when its chrome outline is gone', () => {
+    const floating = cn(buttonVariants({ variant: 'floating', size: 'icon-theme' }));
+
+    expect(floating).toContain('border-border-chrome');
+    expect(floating).toContain('bg-surface-chat/90');
+    expect(floating).toContain('theme-chrome-quiet:bg-surface-chat');
+    expect(floating).toContain('theme-chrome-quiet:shadow-md');
+  });
+
   it('outlines a toggle in the control border', () => {
     expect(cn(buttonVariants({ variant: 'outline-toggle' }))).toContain('border-border-control');
   });
diff --git a/packages/client/src/components/Button.tsx b/packages/client/src/components/Button.tsx
index d7abfee4bdc..2910c1cc8f4 100644
--- a/packages/client/src/components/Button.tsx
+++ b/packages/client/src/components/Button.tsx
@@ -15,9 +15,11 @@ type ButtonVariantOptions =
         | 'submit'
         | 'outline'
         | 'outline-toggle'
+        | 'floating'
         | 'choice'
         | 'subtle'
         | 'destructive'
+        | 'destructive-soft'
         | 'secondary'
         | 'ghost'
         | 'quiet'
@@ -71,9 +73,23 @@ const buttonVariantRecipe = cva(
         default:
           'bg-button-primary text-text-inverted hover:bg-button-primary-hover hover:active:bg-surface-inverted-pressed',
         destructive:
+          'bg-surface-destructive text-text-on-status hover:bg-surface-destructive-hover',
+        /**
+         * A destructive action offered inline, such as a row's delete or a revoke beside its
+         * label. A theme whose `destructiveStyle` is `soft` tints it; the confirming button of a
+         * destructive dialog stays `destructive`, the strongest action on screen.
+         */
+        'destructive-soft':
           'bg-surface-destructive text-text-on-status hover:bg-surface-destructive-hover theme-destructive-soft:bg-surface-destructive/10 theme-destructive-soft:text-text-destructive theme-destructive-soft:hover:bg-surface-destructive/14 theme-destructive-soft:hover:active:bg-surface-destructive/17',
         outline:
           'text-text-primary border border-border-light bg-transparent hover:bg-surface-hover hover:active:bg-surface-pressed hover:text-text-primary',
+        /**
+         * A control floating over scrolling content, such as the scroll-to-bottom chip. A theme that
+         * draws no chrome outline gives it an opaque fill and a lift instead, so it never reads as a
+         * bare glyph over the thread.
+         */
+        floating:
+          'border border-border-chrome bg-surface-chat/90 text-text-primary hover:bg-surface-hover hover:active:bg-surface-pressed theme-chrome-quiet:bg-surface-chat theme-chrome-quiet:shadow-md theme-chrome-quiet:hover:bg-surface-hover',
         /** An outlined filter whose pressed state stays visible between activations. */
         'outline-toggle':
           'text-text-primary border border-border-control bg-transparent transition-none hover:bg-surface-hover hover:active:bg-surface-pressed hover:text-text-primary aria-pressed:border-border-heavy aria-pressed:bg-surface-active-alt aria-pressed:hover:bg-surface-active-alt',
diff --git a/packages/client/src/theme/README.md b/packages/client/src/theme/README.md
index 77bc0e6e562..2c23ec6defb 100644
--- a/packages/client/src/theme/README.md
+++ b/packages/client/src/theme/README.md
@@ -441,10 +441,13 @@ Each status family has a foreground, a `-subtle` background, a `-border`, and a
   and Dialog scrims: `surface-overlay` at the `scrimOpacity`,
   `alertScrimOpacity` and `modalScrimOpacity` appearance roles (80%, 90% and
   65% by default). A bundled scrim dims the page and never lifts it.
-- `theme-destructive-soft:` - A variant for a `destructive` Button's tint: the
+- `theme-destructive-soft:` - A variant for a `destructive-soft` Button's tint (the inline delete or revoke; a dialog's confirming `destructive` button stays solid): the
   button paints a 10% tint of the destructive surface under the destructive ink
   when the theme's `destructiveStyle` is `soft`. The default `fill` keeps the
   solid destructive surface.
+- `theme-chrome-quiet:` - A variant for a surface that stands in for a chrome
+  outline: it applies when the theme's `chromeBorderAlpha` is `0`, so a floating
+  control or a bar over a scrolling thread stays separable once its edge is gone.
 - `border-border-inset-medium` - `border-medium` at the `insetBorderAlpha`
   appearance role, for the box edges of a form that sits on a stroked page.
 - `ring-focus-subtle` / `outline-focus-subtle` - The keyboard ring of a row or
diff --git a/packages/client/src/theme/tokens.css b/packages/client/src/theme/tokens.css
index 1356e189226..0b4a7405ff5 100644
--- a/packages/client/src/theme/tokens.css
+++ b/packages/client/src/theme/tokens.css
@@ -287,6 +287,18 @@
   }
 }
 
+/* A theme whose `chromeBorderAlpha` is `0` draws no outline on chrome controls, so a control that
+ * floats over content or a bar that sits over a scrolling thread needs a surface in place of the
+ * edge. Read, like the disabled style, from the `--theme-border-chrome-alpha` property the nearest
+ * themed root carries. */
+@custom-variant theme-chrome-quiet {
+  @container style(--theme-border-chrome-alpha: 0) {
+    &:is(:root *) {
+      @slot;
+    }
+  }
+}
+
 /* A theme whose `fieldFocusStyle` is `border` swaps a focused field's edge color instead of
  * drawing a ring. Read, like the disabled style, from the `--theme-field-focus-style` property
  * the nearest themed root carries. */

From bd45a45bceb68811e2058a3b369ce7e586db8439 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 6 Oct 2026 17:40:43 +0200
Subject: [PATCH 2/5] fix: Soften Remaining Inline Destructive Triggers and
 Canonicalize Zero Chrome Alpha

---
 .../SettingsTabs/Account/DeleteAccount.tsx    |  2 +-
 .../Nav/SettingsTabs/ApiKeys/Item.tsx         | 12 ++++----
 .../Nav/SettingsTabs/Data/DeleteCache.tsx     |  2 +-
 .../Nav/SettingsTabs/Data/RevokeKeys.tsx      |  2 +-
 .../components/Skills/dialogs/DeleteSkill.tsx |  2 +-
 .../client/src/theme/utils/applyTheme.spec.ts | 28 +++++++++++++++++++
 packages/client/src/theme/utils/applyTheme.ts |  7 ++++-
 7 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx b/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
index 681eb003cb2..d6f7497c692 100644
--- a/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
@@ -70,7 +70,7 @@ const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolea
           <OGDialogTrigger asChild>
             <Button
               aria-labelledby="delete-account-label"
-              variant="destructive"
+              variant="destructive-soft"
               onClick={() => setDialogOpen(true)}
               disabled={disabled}
             >
diff --git a/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx b/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx
index 7a1786fd2c3..b21873f0b6f 100644
--- a/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx
+++ b/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx
@@ -18,24 +18,24 @@ export default function Item({ apiKey }: ItemProps) {
   const status = getExpiryStatus(apiKey.expiresAt);
 
   return (
-    <li className="group flex items-start justify-between gap-3 px-4 py-3 transition-colors first:rounded-t-xl last:rounded-b-xl hover:bg-surface-secondary/50">
+    <li className="group hover:bg-surface-secondary/50 flex items-start justify-between gap-3 px-4 py-3 transition-colors first:rounded-t-xl last:rounded-b-xl">
       <div className="min-w-0 flex-1 space-y-1">
         <div className="flex items-center gap-2">
-          <span className="truncate font-medium text-text-primary">{apiKey.name}</span>
+          <span className="text-text-primary truncate font-medium">{apiKey.name}</span>
           {status?.state === 'expired' && (
-            <span className="shrink-0 rounded-full border border-status-error-border bg-status-error-subtle px-2 py-0.5 text-xs font-medium text-status-error">
+            <span className="border-status-error-border bg-status-error-subtle text-status-error shrink-0 rounded-full border px-2 py-0.5 text-xs font-medium">
               {localize('com_ui_api_key_expired')}
             </span>
           )}
           {status?.state === 'expiring' && (
-            <span className="shrink-0 rounded-full border border-status-warning-border bg-status-warning-subtle px-2 py-0.5 text-xs font-medium text-status-warning">
+            <span className="border-status-warning-border bg-status-warning-subtle text-status-warning shrink-0 rounded-full border px-2 py-0.5 text-xs font-medium">
               {status.days === 1
                 ? localize('com_ui_api_key_expires_in_day')
                 : localize('com_ui_api_key_expires_in_days', { 0: status.days })}
             </span>
           )}
         </div>
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-text-secondary">
+        <div className="text-text-secondary flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs">
           <code className="font-mono">{apiKey.keyPrefix}…</code>
           <span aria-hidden="true" className="text-text-tertiary">
             ·
@@ -57,7 +57,7 @@ export default function Item({ apiKey }: ItemProps) {
       </div>
       <Button
         ref={deleteButtonRef}
-        variant="destructive"
+        variant="destructive-soft"
         size="icon"
         onClick={() => setDeleteOpen(true)}
         aria-label={localize('com_ui_api_key_delete_name', { 0: apiKey.name })}
diff --git a/client/src/components/Nav/SettingsTabs/Data/DeleteCache.tsx b/client/src/components/Nav/SettingsTabs/Data/DeleteCache.tsx
index ac6911517e3..7e5170d7e62 100644
--- a/client/src/components/Nav/SettingsTabs/Data/DeleteCache.tsx
+++ b/client/src/components/Nav/SettingsTabs/Data/DeleteCache.tsx
@@ -47,7 +47,7 @@ export const DeleteCache = ({ disabled = false }: { disabled?: boolean }) => {
       <OGDialog open={open} onOpenChange={setOpen}>
         <OGDialogTrigger asChild>
           <Button
-            variant="destructive"
+            variant="destructive-soft"
             onClick={() => setOpen(true)}
             disabled={disabled || isCacheEmpty}
             aria-labelledby="delete-cache-label"
diff --git a/client/src/components/Nav/SettingsTabs/Data/RevokeKeys.tsx b/client/src/components/Nav/SettingsTabs/Data/RevokeKeys.tsx
index f3087a369b8..39640854507 100644
--- a/client/src/components/Nav/SettingsTabs/Data/RevokeKeys.tsx
+++ b/client/src/components/Nav/SettingsTabs/Data/RevokeKeys.tsx
@@ -42,7 +42,7 @@ export const RevokeKeys = ({
       <OGDialog open={open} onOpenChange={setOpen}>
         <OGDialogTrigger asChild>
           <Button
-            variant="destructive"
+            variant="destructive-soft"
             onClick={() => setOpen(true)}
             disabled={disabled}
             aria-labelledby="revoke-info-label"
diff --git a/client/src/components/Skills/dialogs/DeleteSkill.tsx b/client/src/components/Skills/dialogs/DeleteSkill.tsx
index 139e14477e4..ffe51f03c33 100644
--- a/client/src/components/Skills/dialogs/DeleteSkill.tsx
+++ b/client/src/components/Skills/dialogs/DeleteSkill.tsx
@@ -62,7 +62,7 @@ function DeleteSkill({ skillId, skillName, disabled, onDelete }: DeleteSkillProp
           side="bottom"
           render={
             <Button
-              variant="destructive"
+              variant="destructive-soft"
               size="icon"
               className="size-9"
               aria-label={localize('com_ui_delete')}
diff --git a/packages/client/src/theme/utils/applyTheme.spec.ts b/packages/client/src/theme/utils/applyTheme.spec.ts
index 93c95f9dfc3..3b60f49446b 100644
--- a/packages/client/src/theme/utils/applyTheme.spec.ts
+++ b/packages/client/src/theme/utils/applyTheme.spec.ts
@@ -148,6 +148,34 @@ describe('applyTheme', () => {
     expect(root.style.getPropertyValue('--theme-motion-fast')).toBe('80ms');
   });
 
+  it.each(['0', '.0', '0.0', '0.00'])('writes a chrome border alpha of %s as 0', (alpha) => {
+    const theme: ThemeDefinition = {
+      version: 1,
+      name: 'quiet-reference',
+      modes: { light: { appearance: { chromeBorderAlpha: alpha } } },
+    };
+
+    applyResolvedTheme(resolveTheme(theme, 'light'));
+
+    expect(document.documentElement.style.getPropertyValue('--theme-border-chrome-alpha')).toBe(
+      '0',
+    );
+  });
+
+  it('leaves a non-zero chrome border alpha as written', () => {
+    const theme: ThemeDefinition = {
+      version: 1,
+      name: 'faint-reference',
+      modes: { light: { appearance: { chromeBorderAlpha: '0.5' } } },
+    };
+
+    applyResolvedTheme(resolveTheme(theme, 'light'));
+
+    expect(document.documentElement.style.getPropertyValue('--theme-border-chrome-alpha')).toBe(
+      '0.5',
+    );
+  });
+
   /** The plain `rounded-*`, `font-sans` and `font-mono` utilities read these properties, so a
    *  theme reaches every call site only if the adapter writes them and a reset removes them. */
   it('applies and clears the radius and shadow scales and the mono family', () => {
diff --git a/packages/client/src/theme/utils/applyTheme.ts b/packages/client/src/theme/utils/applyTheme.ts
index 527529ccf2f..b010c818f0e 100644
--- a/packages/client/src/theme/utils/applyTheme.ts
+++ b/packages/client/src/theme/utils/applyTheme.ts
@@ -173,10 +173,15 @@ function mapColors(colors: IThemeRGB, base?: IThemeRGB): Array<[string, string]>
   return variables;
 }
 
+/** The `theme-chrome-quiet:` variant matches the literal `0`, so every spelling of zero is written as it. */
+function canonicalAppearance(key: keyof IThemeAppearance, value: string): string {
+  return key === 'chromeBorderAlpha' && Number(value) === 0 ? '0' : value;
+}
+
 function mapAppearance(appearance: IThemeAppearance): Array<[string, string]> {
   return Object.entries(themeAppearanceProperties).map(([key, property]) => [
     property,
-    appearance[key as keyof IThemeAppearance],
+    canonicalAppearance(key as keyof IThemeAppearance, appearance[key as keyof IThemeAppearance]),
   ]);
 }
 

From f5c8b6f5af56e8a7e009a9d30792a87d4ab37d28 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Wed, 7 Oct 2026 12:09:27 +0200
Subject: [PATCH 3/5] fix: Keep Pressed Feedback on the Quiet-Chrome Floating
 Control and Cover the Quiet Surfaces

---
 .../scenarios/chrome-quiet-surfaces.spec.ts   | 115 ++++++++++++++++++
 .../client/src/components/Button.spec.tsx     |   1 +
 packages/client/src/components/Button.tsx     |   2 +-
 3 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 e2e/specs/mock/scenarios/chrome-quiet-surfaces.spec.ts

diff --git a/e2e/specs/mock/scenarios/chrome-quiet-surfaces.spec.ts b/e2e/specs/mock/scenarios/chrome-quiet-surfaces.spec.ts
new file mode 100644
index 00000000000..11ea17fd17a
--- /dev/null
+++ b/e2e/specs/mock/scenarios/chrome-quiet-surfaces.spec.ts
@@ -0,0 +1,115 @@
+import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { clickHouseTheme } from '../../../../packages/client/src/theme/themes/clickhouse';
+import { NEW_CHAT_PATH } from '../helpers';
+
+/**
+ * Surfaces that stand in for a chrome outline. A theme whose `chromeBorderAlpha` is 0 draws no edge
+ * on chrome controls, so the chat header stops fading into the thread and takes the canvas, and a
+ * theme whose `fieldFillStyle` is `fill` strokes the sidebar search field it fills. The bundled
+ * default theme keeps the gradient header and the unstroked search field.
+ */
+
+type Mode = 'light' | 'dark';
+type Surfaces = { headerImage: string; headerColor: string; searchBorderWidth: string };
+
+const QUIET_ZERO_SPELLING = {
+  version: 1,
+  name: 'e2e-quiet-zero',
+  modes: {
+    light: { colors: {}, appearance: { chromeBorderAlpha: '0.0' } },
+    dark: { colors: {}, appearance: { chromeBorderAlpha: '0.0' } },
+  },
+} as const;
+
+async function openChat(page: Page, mode: Mode, definition?: { name: string }) {
+  await page.addInitScript(
+    ([appearance, stored]) => {
+      localStorage.setItem('color-theme', appearance as string);
+      localStorage.removeItem('theme-colors');
+      localStorage.removeItem('theme-name');
+      if (stored) {
+        localStorage.setItem('theme-definition', JSON.stringify(stored));
+        localStorage.setItem('theme-source', 'definition');
+      } else {
+        localStorage.removeItem('theme-definition');
+        localStorage.removeItem('theme-source');
+      }
+    },
+    [mode, definition ?? null] as [string, unknown],
+  );
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto(NEW_CHAT_PATH, { timeout: 15000 });
+  await expect(page.getByRole('textbox', { name: 'Message input' })).toBeVisible({
+    timeout: 30000,
+  });
+  const root = page.locator('html');
+  if (definition) {
+    await expect(root).toHaveAttribute('data-theme', definition.name);
+  } else {
+    await expect(root).not.toHaveAttribute('data-theme');
+  }
+  await expect(root).toHaveClass(mode === 'dark' ? /\bdark\b/ : /\blight\b/);
+}
+
+async function surfaces(page: Page): Promise<Surfaces> {
+  const header = page.locator('div[class~="theme-chrome-quiet:bg-none"]').first();
+  const search = page.getByRole('textbox', { name: 'Search messages' }).first().locator('..');
+  await expect(header).toBeVisible();
+  await expect(search).toBeVisible();
+  const [headerImage, headerColor] = await header.evaluate((node) => {
+    const style = getComputedStyle(node);
+    return [style.backgroundImage, style.backgroundColor];
+  });
+  const searchBorderWidth = await search.evaluate((node) => getComputedStyle(node).borderTopWidth);
+  return { headerImage, headerColor, searchBorderWidth };
+}
+
+test.describe('surfaces that replace a chrome outline', () => {
+  test('the default light theme keeps the gradient header and an unstroked search field @scenario:chrome-quiet-default-light-unchanged', async ({
+    page,
+  }) => {
+    await openChat(page, 'light');
+    const result = await surfaces(page);
+    expect(result.headerImage).toContain('linear-gradient');
+    expect(result.searchBorderWidth).toBe('0px');
+  });
+
+  test('the default dark theme keeps the gradient header and an unstroked search field @scenario:chrome-quiet-default-dark-unchanged', async ({
+    page,
+  }) => {
+    await openChat(page, 'dark');
+    const result = await surfaces(page);
+    expect(result.headerImage).toContain('linear-gradient');
+    expect(result.searchBorderWidth).toBe('0px');
+  });
+
+  test('the ClickHouse theme paints an opaque header and strokes the search field @scenario:chrome-quiet-clickhouse-light', async ({
+    page,
+  }) => {
+    await openChat(page, 'light', clickHouseTheme);
+    const result = await surfaces(page);
+    expect(result.headerImage).toBe('none');
+    expect(result.headerColor).not.toBe('rgba(0, 0, 0, 0)');
+    expect(result.searchBorderWidth).toBe('1px');
+  });
+
+  test('the ClickHouse dark theme paints an opaque header and strokes the search field @scenario:chrome-quiet-clickhouse-dark', async ({
+    page,
+  }) => {
+    await openChat(page, 'dark', clickHouseTheme);
+    const result = await surfaces(page);
+    expect(result.headerImage).toBe('none');
+    expect(result.headerColor).not.toBe('rgba(0, 0, 0, 0)');
+    expect(result.searchBorderWidth).toBe('1px');
+  });
+
+  test('a theme that spells the zero chrome alpha as 0.0 still paints the opaque header @scenario:chrome-quiet-zero-spelling', async ({
+    page,
+  }) => {
+    await openChat(page, 'light', QUIET_ZERO_SPELLING);
+    const result = await surfaces(page);
+    expect(result.headerImage).toBe('none');
+    expect(result.headerColor).not.toBe('rgba(0, 0, 0, 0)');
+  });
+});
diff --git a/packages/client/src/components/Button.spec.tsx b/packages/client/src/components/Button.spec.tsx
index 115d98aa5d9..044e2f388ba 100644
--- a/packages/client/src/components/Button.spec.tsx
+++ b/packages/client/src/components/Button.spec.tsx
@@ -69,6 +69,7 @@ describe('Button', () => {
     expect(floating).toContain('bg-surface-chat/90');
     expect(floating).toContain('theme-chrome-quiet:bg-surface-chat');
     expect(floating).toContain('theme-chrome-quiet:shadow-md');
+    expect(floating).toContain('theme-chrome-quiet:hover:active:bg-surface-pressed');
   });
 
   it('outlines a toggle in the control border', () => {
diff --git a/packages/client/src/components/Button.tsx b/packages/client/src/components/Button.tsx
index 2910c1cc8f4..51ab33fc10e 100644
--- a/packages/client/src/components/Button.tsx
+++ b/packages/client/src/components/Button.tsx
@@ -89,7 +89,7 @@ const buttonVariantRecipe = cva(
          * bare glyph over the thread.
          */
         floating:
-          'border border-border-chrome bg-surface-chat/90 text-text-primary hover:bg-surface-hover hover:active:bg-surface-pressed theme-chrome-quiet:bg-surface-chat theme-chrome-quiet:shadow-md theme-chrome-quiet:hover:bg-surface-hover',
+          'border border-border-chrome bg-surface-chat/90 text-text-primary hover:bg-surface-hover hover:active:bg-surface-pressed theme-chrome-quiet:bg-surface-chat theme-chrome-quiet:shadow-md theme-chrome-quiet:hover:bg-surface-hover theme-chrome-quiet:hover:active:bg-surface-pressed',
         /** An outlined filter whose pressed state stays visible between activations. */
         'outline-toggle':
           'text-text-primary border border-border-control bg-transparent transition-none hover:bg-surface-hover hover:active:bg-surface-pressed hover:text-text-primary aria-pressed:border-border-heavy aria-pressed:bg-surface-active-alt aria-pressed:hover:bg-surface-active-alt',

From 0eba442c8d9372b3cca71ad7c7895d7a15332d1b Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Wed, 7 Oct 2026 12:15:47 +0200
Subject: [PATCH 4/5] test: Scope the Quiet Surface Scenarios to the Header

---
 .../scenarios/chrome-quiet-surfaces.spec.ts   | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/e2e/specs/mock/scenarios/chrome-quiet-surfaces.spec.ts b/e2e/specs/mock/scenarios/chrome-quiet-surfaces.spec.ts
index 11ea17fd17a..eadebcb82f6 100644
--- a/e2e/specs/mock/scenarios/chrome-quiet-surfaces.spec.ts
+++ b/e2e/specs/mock/scenarios/chrome-quiet-surfaces.spec.ts
@@ -5,13 +5,12 @@ import { NEW_CHAT_PATH } from '../helpers';
 
 /**
  * Surfaces that stand in for a chrome outline. A theme whose `chromeBorderAlpha` is 0 draws no edge
- * on chrome controls, so the chat header stops fading into the thread and takes the canvas, and a
- * theme whose `fieldFillStyle` is `fill` strokes the sidebar search field it fills. The bundled
- * default theme keeps the gradient header and the unstroked search field.
+ * on chrome controls, so the chat header stops fading into the thread and takes the canvas. The
+ * bundled default theme keeps the gradient header.
  */
 
 type Mode = 'light' | 'dark';
-type Surfaces = { headerImage: string; headerColor: string; searchBorderWidth: string };
+type Surfaces = { headerImage: string; headerColor: string };
 
 const QUIET_ZERO_SPELLING = {
   version: 1,
@@ -54,54 +53,47 @@ async function openChat(page: Page, mode: Mode, definition?: { name: string }) {
 
 async function surfaces(page: Page): Promise<Surfaces> {
   const header = page.locator('div[class~="theme-chrome-quiet:bg-none"]').first();
-  const search = page.getByRole('textbox', { name: 'Search messages' }).first().locator('..');
   await expect(header).toBeVisible();
-  await expect(search).toBeVisible();
   const [headerImage, headerColor] = await header.evaluate((node) => {
     const style = getComputedStyle(node);
     return [style.backgroundImage, style.backgroundColor];
   });
-  const searchBorderWidth = await search.evaluate((node) => getComputedStyle(node).borderTopWidth);
-  return { headerImage, headerColor, searchBorderWidth };
+  return { headerImage, headerColor };
 }
 
 test.describe('surfaces that replace a chrome outline', () => {
-  test('the default light theme keeps the gradient header and an unstroked search field @scenario:chrome-quiet-default-light-unchanged', async ({
+  test('the default light theme keeps the gradient header @scenario:chrome-quiet-default-light-unchanged', async ({
     page,
   }) => {
     await openChat(page, 'light');
     const result = await surfaces(page);
     expect(result.headerImage).toContain('linear-gradient');
-    expect(result.searchBorderWidth).toBe('0px');
   });
 
-  test('the default dark theme keeps the gradient header and an unstroked search field @scenario:chrome-quiet-default-dark-unchanged', async ({
+  test('the default dark theme keeps the gradient header @scenario:chrome-quiet-default-dark-unchanged', async ({
     page,
   }) => {
     await openChat(page, 'dark');
     const result = await surfaces(page);
     expect(result.headerImage).toContain('linear-gradient');
-    expect(result.searchBorderWidth).toBe('0px');
   });
 
-  test('the ClickHouse theme paints an opaque header and strokes the search field @scenario:chrome-quiet-clickhouse-light', async ({
+  test('the ClickHouse theme paints an opaque header @scenario:chrome-quiet-clickhouse-light', async ({
     page,
   }) => {
     await openChat(page, 'light', clickHouseTheme);
     const result = await surfaces(page);
     expect(result.headerImage).toBe('none');
     expect(result.headerColor).not.toBe('rgba(0, 0, 0, 0)');
-    expect(result.searchBorderWidth).toBe('1px');
   });
 
-  test('the ClickHouse dark theme paints an opaque header and strokes the search field @scenario:chrome-quiet-clickhouse-dark', async ({
+  test('the ClickHouse dark theme paints an opaque header @scenario:chrome-quiet-clickhouse-dark', async ({
     page,
   }) => {
     await openChat(page, 'dark', clickHouseTheme);
     const result = await surfaces(page);
     expect(result.headerImage).toBe('none');
     expect(result.headerColor).not.toBe('rgba(0, 0, 0, 0)');
-    expect(result.searchBorderWidth).toBe('1px');
   });
 
   test('a theme that spells the zero chrome alpha as 0.0 still paints the opaque header @scenario:chrome-quiet-zero-spelling', async ({

From b753f24b9c03f474784e822bc35aaa47e2085e83 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Wed, 7 Oct 2026 12:41:37 +0200
Subject: [PATCH 5/5] fix: Keep the Two-Factor Disable Trigger on the Soft
 Destructive Variant

---
 .../Nav/SettingsTabs/Account/DisableTwoFactorToggle.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Nav/SettingsTabs/Account/DisableTwoFactorToggle.tsx b/client/src/components/Nav/SettingsTabs/Account/DisableTwoFactorToggle.tsx
index 1de57b3a741..74a6a0bacc2 100644
--- a/client/src/components/Nav/SettingsTabs/Account/DisableTwoFactorToggle.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/DisableTwoFactorToggle.tsx
@@ -23,7 +23,7 @@ export const DisableTwoFactorToggle: React.FC<DisableTwoFactorToggleProps> = ({
   const actionButton = (
     <Button
       ref={buttonRef}
-      variant={enabled ? 'destructive' : 'outline'}
+      variant={enabled ? 'destructive-soft' : 'outline'}
       onClick={isDisableBlockedByPolicy ? undefined : onChange}
       disabled={disabled}
       aria-disabled={isDisableBlockedByPolicy || disabled || undefined}