From 19c5adeff5a0c470df8a29625dc511d3c6f3b586 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sun, 4 Oct 2026 23:00:47 +0200
Subject: [PATCH 1/9] feat: Quiet Prompt Editor Boxes, Table Columns and
 Destructive Buttons for a Theme

---
 .../components/Messages/Content/CodeBlock.tsx |   4 +-
 .../Prompts/display/PromptVariables.tsx       |   4 +-
 .../src/components/Prompts/fields/Command.tsx |   2 +-
 .../components/Prompts/fields/Description.tsx |   2 +-
 client/src/style.css                          |   9 ++
 .../mock/scenarios/prompt-surfaces.spec.ts    | 149 ++++++++++++++++++
 .../client/src/components/Button.spec.tsx     |  13 ++
 packages/client/src/components/Button.tsx     |   4 +-
 packages/client/src/theme/README.md           |   6 +
 packages/client/src/theme/defaults.css        |   1 +
 packages/client/src/theme/registry.spec.ts    |  20 +++
 packages/client/src/theme/registry.ts         |   2 +
 .../client/src/theme/themes/clickhouse.ts     |   2 +
 .../client/src/theme/themes/clickui.spec.ts   |   6 +
 packages/client/src/theme/tokens.css          |  13 ++
 packages/client/src/theme/tokens.spec.ts      |   8 +
 packages/client/src/theme/types/index.ts      |   6 +
 packages/data-provider/src/theme.ts           |   2 +
 18 files changed, 245 insertions(+), 8 deletions(-)
 create mode 100644 e2e/specs/mock/scenarios/prompt-surfaces.spec.ts

diff --git a/client/src/components/Messages/Content/CodeBlock.tsx b/client/src/components/Messages/Content/CodeBlock.tsx
index d55644ff28e..332981419b3 100644
--- a/client/src/components/Messages/Content/CodeBlock.tsx
+++ b/client/src/components/Messages/Content/CodeBlock.tsx
@@ -101,7 +101,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
   return (
     <div
       ref={containerRef}
-      className="border-border-light relative w-full overflow-hidden rounded-xl border text-xs"
+      className="border-border-inset relative w-full overflow-hidden rounded-xl border text-xs"
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onFocus={handleFocus}
@@ -138,7 +138,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
       />
       {allowExecution === true && toolCalls && toolCalls.length > 0 && (
         <>
-          <div className="border-border-light bg-surface-code border-t p-4 text-xs">
+          <div className="border-border-inset bg-surface-code border-t p-4 text-xs">
             <div className="text-text-secondary mb-1 text-[10px] font-medium tracking-wide uppercase">
               {localize('com_ui_output')}
             </div>
diff --git a/client/src/components/Prompts/display/PromptVariables.tsx b/client/src/components/Prompts/display/PromptVariables.tsx
index 598153d7b7d..a6dffa2dd02 100644
--- a/client/src/components/Prompts/display/PromptVariables.tsx
+++ b/client/src/components/Prompts/display/PromptVariables.tsx
@@ -138,8 +138,8 @@ const PromptVariables = ({ promptText }: { promptText: string }) => {
   }
 
   return (
-    <div className="border-border-medium overflow-hidden rounded-xl border">
-      <header className="border-border-medium flex items-center justify-between border-b p-3">
+    <div className="border-border-inset-medium overflow-hidden rounded-xl border">
+      <header className="border-border-inset-medium flex items-center justify-between border-b p-3">
         <div className="flex items-center gap-2">
           <Variable className="text-text-secondary size-4" aria-hidden="true" />
           <h4 className="text-text-primary text-sm font-semibold">
diff --git a/client/src/components/Prompts/fields/Command.tsx b/client/src/components/Prompts/fields/Command.tsx
index d0632423fd0..d13f7e698ad 100644
--- a/client/src/components/Prompts/fields/Command.tsx
+++ b/client/src/components/Prompts/fields/Command.tsx
@@ -49,7 +49,7 @@ const Command = ({
   }
 
   return (
-    <div className="border-border-medium rounded-xl border">
+    <div className="border-border-inset-medium rounded-xl border">
       <label htmlFor={commandId} className="text-text-secondary block px-4 pt-2 text-sm md:hidden">
         {localize('com_ui_command_placeholder')}
       </label>
diff --git a/client/src/components/Prompts/fields/Description.tsx b/client/src/components/Prompts/fields/Description.tsx
index 33df7a38746..3aeefc38b06 100644
--- a/client/src/components/Prompts/fields/Description.tsx
+++ b/client/src/components/Prompts/fields/Description.tsx
@@ -46,7 +46,7 @@ const Description = ({
   }
 
   return (
-    <div className="border-border-medium rounded-xl border">
+    <div className="border-border-inset-medium rounded-xl border">
       <label
         htmlFor={descriptionId}
         className="text-text-secondary block px-4 pt-2 text-sm md:hidden"
diff --git a/client/src/style.css b/client/src/style.css
index 212c99cee4b..96a4eb98d5b 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1288,6 +1288,15 @@ html[data-drawer-nav] body {
   border-bottom-right-radius: 0.375rem;
 }
 
+/* The column rules take the inset share of the compatibility edge, so a theme that draws no inset
+ * border keeps the row rules and the outer frame only. High contrast restates them above. */
+.markdown th,
+.markdown th:last-child,
+.markdown td,
+.markdown td:last-child {
+  border-left-color: rgb(from theme(colors.gray.200) r g b / var(--theme-border-inset-alpha, 1));
+}
+
 .markdown a {
   text-decoration-line: underline;
   text-underline-offset: 2px;
diff --git a/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts b/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
new file mode 100644
index 00000000000..3bd8eac90b3
--- /dev/null
+++ b/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
@@ -0,0 +1,149 @@
+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';
+
+/**
+ * The prompt-editor and table surfaces of the ClickHouse border switch. A `destructive` Button is
+ * solid by default and a 10% tint under the destructive ink when the theme's `destructiveStyle` is
+ * `soft`; `border-inset-medium` is `border-medium` at the inset share, so the prompt editor's form
+ * boxes keep their edge in the bundled themes and drop it in ClickHouse; and a markdown table keeps
+ * its column rules only while the inset share is above zero. The probes carry the classes the
+ * components compose, so only the roles style them.
+ */
+
+type Mode = 'light' | 'dark';
+type Paint = { destructive: string; inset: string; column: string };
+
+const SOFT_THEME = {
+  version: 1,
+  name: 'e2e-prompt-surfaces',
+  modes: {
+    light: {
+      colors: { 'rgb-border-medium': '10 20 30', 'rgb-surface-destructive': '200 0 0' },
+      appearance: { destructiveStyle: 'soft', insetBorderAlpha: '0.5' },
+    },
+    dark: {
+      colors: { 'rgb-border-medium': '10 20 30', 'rgb-surface-destructive': '200 0 0' },
+      appearance: { destructiveStyle: 'soft', insetBorderAlpha: '0.5' },
+    },
+  },
+} 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.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/);
+}
+
+function paint(page: Page): Promise<Paint> {
+  return page.evaluate(() => {
+    const read = (html: string, pick: (node: Element) => string, className = '') => {
+      const host = document.createElement('div');
+      host.className = className;
+      host.innerHTML = html;
+      document.body.append(host);
+      const value = pick(host.firstElementChild as Element);
+      host.remove();
+      return value;
+    };
+    return {
+      destructive: read(
+        '<div class="bg-surface-destructive theme-destructive-soft:bg-surface-destructive/10"></div>',
+        (node) => getComputedStyle(node).backgroundColor,
+      ),
+      inset: read(
+        '<div class="border border-solid border-border-inset-medium"></div>',
+        (node) => getComputedStyle(node).borderTopColor,
+      ),
+      column: read(
+        '<table><tbody><tr><td>cell</td></tr></tbody></table>',
+        (node) => getComputedStyle(node.querySelector('td') as Element).borderLeftColor,
+        'markdown',
+      ),
+    };
+  });
+}
+
+/** An opaque color computes to `rgb(...)`; a tint or a drawn-away color carries an alpha slot. */
+const opaque = /^rgb\(\d+, \d+, \d+\)$/;
+const clear = /(\/ 0\)|, 0\)|\/ 0\.0*\))$/;
+const tinted = /(\/ 0\.1\d*\)|, 0\.1\d*\))$/;
+
+/** Each tag is written out whole: the runner finds a scenario by its literal tag. */
+const CASES: Array<{
+  title: string;
+  mode: Mode;
+  definition?: { name: string };
+  expects: { [K in keyof Paint]: RegExp };
+}> = [
+  {
+    title:
+      'the default light theme keeps a solid destructive button, form box edge and column rule @scenario:prompt-surfaces-default-light-unchanged',
+    mode: 'light',
+    expects: { destructive: opaque, inset: opaque, column: opaque },
+  },
+  {
+    title:
+      'the default dark theme keeps a solid destructive button, form box edge and column rule @scenario:prompt-surfaces-default-dark-unchanged',
+    mode: 'dark',
+    expects: { destructive: opaque, inset: opaque, column: opaque },
+  },
+  {
+    title:
+      'the ClickHouse light theme tints the destructive button and draws no form box edge or column rule @scenario:prompt-surfaces-clickhouse-light',
+    mode: 'light',
+    definition: clickHouseTheme,
+    expects: { destructive: tinted, inset: clear, column: clear },
+  },
+  {
+    title:
+      'the ClickHouse dark theme tints the destructive button and draws no form box edge or column rule @scenario:prompt-surfaces-clickhouse-dark',
+    mode: 'dark',
+    definition: clickHouseTheme,
+    expects: { destructive: tinted, inset: clear, column: clear },
+  },
+  {
+    title:
+      'a theme that names the destructive style and inset share follows both @scenario:prompt-surfaces-follow-reference-theme',
+    mode: 'light',
+    definition: SOFT_THEME,
+    expects: { destructive: tinted, inset: /0\.5\)$/, column: /0\.5\)$/ },
+  },
+];
+
+test.describe('prompt editor and table surfaces', () => {
+  for (const { title, mode, definition, expects } of CASES) {
+    test(title, async ({ page }) => {
+      await openChat(page, mode, definition);
+
+      const painted = await paint(page);
+      expect(painted.destructive).toMatch(expects.destructive);
+      expect(painted.inset).toMatch(expects.inset);
+      expect(painted.column).toMatch(expects.column);
+    });
+  }
+});
diff --git a/packages/client/src/components/Button.spec.tsx b/packages/client/src/components/Button.spec.tsx
index f51c28d849b..f012f803c0c 100644
--- a/packages/client/src/components/Button.spec.tsx
+++ b/packages/client/src/components/Button.spec.tsx
@@ -10,6 +10,19 @@ jest.mock('react-i18next', () => ({
 }));
 
 describe('Button', () => {
+  it('paints a destructive button solid and tints it only when the theme asks', () => {
+    const destructive = cn(buttonVariants({ variant: 'destructive' }));
+
+    expect(destructive).toContain('bg-surface-destructive');
+    expect(destructive).toContain('text-text-on-status');
+    expect(destructive).toContain('theme-destructive-soft:bg-surface-destructive/10');
+    expect(destructive).toContain('theme-destructive-soft:text-text-destructive');
+  });
+
+  it('outlines a toggle in the control border', () => {
+    expect(cn(buttonVariants({ variant: 'outline-toggle' }))).toContain('border-border-control');
+  });
+
   it('outlines an icon button in the chrome border and a text button in the light one', () => {
     const icon = cn(buttonVariants({ variant: 'outline', size: 'icon-theme' }));
     const text = cn(buttonVariants({ variant: 'outline', size: 'dense' }));
diff --git a/packages/client/src/components/Button.tsx b/packages/client/src/components/Button.tsx
index 631ed1e3ba2..f96cf98ee66 100644
--- a/packages/client/src/components/Button.tsx
+++ b/packages/client/src/components/Button.tsx
@@ -61,12 +61,12 @@ 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',
+          '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/20 theme-destructive-soft:hover:active:bg-surface-destructive/30',
         outline:
           'text-text-primary border border-border-light bg-transparent hover:bg-surface-hover hover:active:bg-surface-pressed hover:text-text-primary',
         /** An outlined filter whose pressed state stays visible between activations. */
         'outline-toggle':
-          'text-text-primary border border-border-light 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',
+          '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',
         /**
          * A selectable answer inside a question card. `outline` is wrong here:
          * its `border-light` edge measures ~1.2:1 against the panel these sit
diff --git a/packages/client/src/theme/README.md b/packages/client/src/theme/README.md
index 4e0111e0345..d8e0bfa358f 100644
--- a/packages/client/src/theme/README.md
+++ b/packages/client/src/theme/README.md
@@ -433,6 +433,12 @@ 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
+  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.
+- `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
   control inside content (tool rows, attachments, summaries, message
   navigation). Defaults to `border-heavy`, so a theme that names neither keeps
diff --git a/packages/client/src/theme/defaults.css b/packages/client/src/theme/defaults.css
index 54741c91b11..4435851818c 100644
--- a/packages/client/src/theme/defaults.css
+++ b/packages/client/src/theme/defaults.css
@@ -332,6 +332,7 @@ html {
   --theme-motion-normal: 200ms;
   --theme-border-chrome-alpha: 1;
   --theme-border-inset-alpha: 1;
+  --theme-destructive-style: fill;
   --switch-unchecked: 148 148 148;
   --switch-thumb: 255 255 255;
   /* Follows the secondary text it was before it had a role, in every mode. */
diff --git a/packages/client/src/theme/registry.spec.ts b/packages/client/src/theme/registry.spec.ts
index 276e76dd439..4b742c47c9d 100644
--- a/packages/client/src/theme/registry.spec.ts
+++ b/packages/client/src/theme/registry.spec.ts
@@ -328,6 +328,26 @@ describe('theme registry', () => {
     ]);
   });
 
+  it('keeps destructive actions solid unless a theme asks for the tint', () => {
+    const soft: ThemeDefinition = {
+      version: 1,
+      name: 'soft-destructive-reference',
+      modes: { light: { appearance: { destructiveStyle: 'soft' } } },
+    };
+    const bogus = {
+      version: 1,
+      name: 'bogus-destructive-reference',
+      modes: { light: { appearance: { destructiveStyle: 'outline' } } },
+    } as unknown as ThemeDefinition;
+
+    expect(defaultAppearance.destructiveStyle).toBe('fill');
+    expect(validateThemeDefinition(soft)).toEqual([]);
+    expect(resolveTheme(soft, 'light').appearance.destructiveStyle).toBe('soft');
+    expect(validateThemeDefinition(bogus)).toEqual([
+      'Invalid appearance value for destructiveStyle: outline',
+    ]);
+  });
+
   it('rings subtle focus in the heavy border for a theme that predates the role', () => {
     const resolved = resolveTheme(
       {
diff --git a/packages/client/src/theme/registry.ts b/packages/client/src/theme/registry.ts
index 65c6fdadf14..fd15107942a 100644
--- a/packages/client/src/theme/registry.ts
+++ b/packages/client/src/theme/registry.ts
@@ -299,6 +299,7 @@ export const themeAppearanceProperties: Readonly<
   motionNormal: '--theme-motion-normal',
   chromeBorderAlpha: '--theme-border-chrome-alpha',
   insetBorderAlpha: '--theme-border-inset-alpha',
+  destructiveStyle: '--theme-destructive-style',
 });
 
 export const defaultAppearance: IThemeAppearance = Object.freeze({
@@ -392,6 +393,7 @@ export const defaultAppearance: IThemeAppearance = Object.freeze({
   motionNormal: '200ms',
   chromeBorderAlpha: '1',
   insetBorderAlpha: '1',
+  destructiveStyle: 'fill',
 });
 
 /**
diff --git a/packages/client/src/theme/themes/clickhouse.ts b/packages/client/src/theme/themes/clickhouse.ts
index 765a02ae995..249e4902c5f 100644
--- a/packages/client/src/theme/themes/clickhouse.ts
+++ b/packages/client/src/theme/themes/clickhouse.ts
@@ -524,6 +524,8 @@ const clickHouseShape = {
    *  transparent), and it separates a card's inner regions by fill. */
   chromeBorderAlpha: '0', // iconButton.primary.stroke.default
   insetBorderAlpha: '0', // separation by fill, not a nested stroke
+  /** Click UI's danger button: a 10% tint of danger under the danger text (button.*.danger). */
+  destructiveStyle: 'soft' as const,
 };
 
 const elevation = (alpha: number): string =>
diff --git a/packages/client/src/theme/themes/clickui.spec.ts b/packages/client/src/theme/themes/clickui.spec.ts
index 369ae88ccf8..2bcf00a8dde 100644
--- a/packages/client/src/theme/themes/clickui.spec.ts
+++ b/packages/client/src/theme/themes/clickui.spec.ts
@@ -654,6 +654,12 @@ const appearanceDecisions: Partial<Record<keyof IThemeAppearance, AppearanceDeci
     reason:
       '0: Click UI separates a card header from its body by fill; only tables and separators draw an inner stroke',
   },
+  destructiveStyle: {
+    value: 'soft',
+    status: 'match',
+    reason:
+      'soft: Click UI paints a danger button as a 10% tint of danger under text.danger (button.basic.color.danger.*: background rgb(255 35 35 / 0.1), hover 0.2, text #c10000)',
+  },
   fieldFillStyle: {
     value: 'fill',
     status: 'match',
diff --git a/packages/client/src/theme/tokens.css b/packages/client/src/theme/tokens.css
index 35ae083058a..28d34e5015c 100644
--- a/packages/client/src/theme/tokens.css
+++ b/packages/client/src/theme/tokens.css
@@ -121,6 +121,8 @@
   --color-border-chrome-heavy: rgb(var(--border-heavy) / calc(var(--border-heavy-alpha, 1) * var(--theme-border-chrome-alpha, 1)));
   /* border-medium, at the chrome share: the hover outline of a chrome control. */
   --color-border-chrome-medium: rgb(var(--border-medium) / calc(var(--border-medium-alpha, 1) * var(--theme-border-chrome-alpha, 1)));
+  /* border-medium, at the inset share: the box edges of a form that sits on a stroked page. */
+  --color-border-inset-medium: rgb(var(--border-medium) / calc(var(--border-medium-alpha, 1) * var(--theme-border-inset-alpha, 1)));
   --color-border-inset: rgb(var(--border-light) / calc(var(--border-light-alpha, 1) * var(--theme-border-inset-alpha, 1)));
   --color-border-medium-alt: rgb(var(--border-medium-alt));
   --color-border-heavy: rgb(var(--border-heavy) / var(--border-heavy-alpha, 1));
@@ -271,6 +273,17 @@
   }
 }
 
+/* A theme whose `destructiveStyle` is `soft` paints the `destructive` Button as a tint of the
+ * destructive surface under the destructive ink, as Click UI's danger button does. Read, like the
+ * disabled style, from the `--theme-destructive-style` property the nearest themed root carries. */
+@custom-variant theme-destructive-soft {
+  @container style(--theme-destructive-style: soft) {
+    &: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. */
diff --git a/packages/client/src/theme/tokens.spec.ts b/packages/client/src/theme/tokens.spec.ts
index 203de10fe7f..c0110e9e6ef 100644
--- a/packages/client/src/theme/tokens.spec.ts
+++ b/packages/client/src/theme/tokens.spec.ts
@@ -133,6 +133,14 @@ describe('theme color tokens', () => {
     );
   });
 
+  it('draws the inset medium border as border-medium at the inset share', async () => {
+    const css = await generate(['border-border-inset-medium']);
+
+    expect(css).toContain(
+      'rgb(var(--border-medium) / calc(var(--border-medium-alpha, 1) * var(--theme-border-inset-alpha, 1)))',
+    );
+  });
+
   it.each(['./theme.css', '../../../../client/src/style.css'])(
     '%s preserves closed compatibility palettes without declaring them as semantic tokens',
     async (repositoryEntry) => {
diff --git a/packages/client/src/theme/types/index.ts b/packages/client/src/theme/types/index.ts
index 2de73e2412d..ac24c19a906 100644
--- a/packages/client/src/theme/types/index.ts
+++ b/packages/client/src/theme/types/index.ts
@@ -703,6 +703,12 @@ export interface IThemeAppearance {
    */
   chromeBorderAlpha: string;
   insetBorderAlpha: string;
+  /**
+   * How a `destructive` Button is painted. `fill` is the solid destructive surface with its
+   * on-status ink; `soft` is a tint of that surface under the destructive ink, with the hover
+   * and pressed tints a step stronger.
+   */
+  destructiveStyle: 'fill' | 'soft';
 }
 
 export interface ThemeModeDefinition {
diff --git a/packages/data-provider/src/theme.ts b/packages/data-provider/src/theme.ts
index 935c93a5a55..412acbb2cee 100644
--- a/packages/data-provider/src/theme.ts
+++ b/packages/data-provider/src/theme.ts
@@ -485,6 +485,8 @@ const appearanceValidators = {
    *  stroked surface, keep: 0 draws none and leaves the box where it was. */
   chromeBorderAlpha: isOpacity,
   insetBorderAlpha: isOpacity,
+  /** `fill` paints a destructive action in the solid destructive surface; `soft` in a tint of it. */
+  destructiveStyle: (value: unknown) => value === 'fill' || value === 'soft',
 } satisfies Record<string, (value: unknown) => boolean>;
 
 export type ThemeAppearanceToken = keyof typeof appearanceValidators;

From 485203e540efb22ccb5b39d32dedd8215fff41dd Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sun, 4 Oct 2026 23:08:03 +0200
Subject: [PATCH 2/9] fix: Outrank the Cell Border Color With the Column Rule
 Share

---
 client/src/style.css | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/src/style.css b/client/src/style.css
index 96a4eb98d5b..b5512daa89b 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1288,15 +1288,21 @@ html[data-drawer-nav] body {
   border-bottom-right-radius: 0.375rem;
 }
 
-/* The column rules take the inset share of the compatibility edge, so a theme that draws no inset
- * border keeps the row rules and the outer frame only. High contrast restates them above. */
-.markdown th,
-.markdown th:last-child,
-.markdown td,
-.markdown td:last-child {
+/* The column rules take the inset share of the edge they were drawn in, so a theme that draws no
+ * inset border keeps the row rules and the outer frame only. The selectors outrank the cell rules
+ * above, which restate the edge in the same declaration, and leave high contrast to its own. */
+html:not(.high-contrast) .markdown th {
   border-left-color: rgb(from theme(colors.gray.200) r g b / var(--theme-border-inset-alpha, 1));
 }
 
+html:not(.high-contrast) .markdown th:last-child,
+html:not(.high-contrast) .markdown td,
+html:not(.high-contrast) .markdown td:last-child {
+  border-left-color: rgb(
+    var(--border-medium) / calc(var(--border-medium-alpha, 1) * var(--theme-border-inset-alpha, 1))
+  );
+}
+
 .markdown a {
   text-decoration-line: underline;
   text-underline-offset: 2px;

From 250fa6a40305367fc4c64132074dea0bdb1ea537 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 08:42:13 +0200
Subject: [PATCH 3/9] fix: Keep the First Table Cell's Outer Edge Under the
 Inset Share

---
 client/src/style.css                             | 15 +++++----------
 e2e/specs/mock/scenarios/prompt-surfaces.spec.ts | 14 ++++++++++----
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/client/src/style.css b/client/src/style.css
index b5512daa89b..a9cefdcc279 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1288,16 +1288,11 @@ html[data-drawer-nav] body {
   border-bottom-right-radius: 0.375rem;
 }
 
-/* The column rules take the inset share of the edge they were drawn in, so a theme that draws no
- * inset border keeps the row rules and the outer frame only. The selectors outrank the cell rules
- * above, which restate the edge in the same declaration, and leave high contrast to its own. */
-html:not(.high-contrast) .markdown th {
-  border-left-color: rgb(from theme(colors.gray.200) r g b / var(--theme-border-inset-alpha, 1));
-}
-
-html:not(.high-contrast) .markdown th:last-child,
-html:not(.high-contrast) .markdown td,
-html:not(.high-contrast) .markdown td:last-child {
+/* The column rules take the inset share of the border-medium edge, so a theme that draws no inset
+ * border keeps the row rules and the outer frame only. The first cell's left edge is that frame and
+ * stays whole. The selector outranks the cell rules above, which restate the edge in one
+ * declaration, and leaves high contrast to its own. */
+html:not(.high-contrast) .markdown :is(th, td):not(:first-child) {
   border-left-color: rgb(
     var(--border-medium) / calc(var(--border-medium-alpha, 1) * var(--theme-border-inset-alpha, 1))
   );
diff --git a/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts b/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
index 3bd8eac90b3..c2b3d196efb 100644
--- a/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
+++ b/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
@@ -8,12 +8,12 @@ import { NEW_CHAT_PATH } from '../helpers';
  * solid by default and a 10% tint under the destructive ink when the theme's `destructiveStyle` is
  * `soft`; `border-inset-medium` is `border-medium` at the inset share, so the prompt editor's form
  * boxes keep their edge in the bundled themes and drop it in ClickHouse; and a markdown table keeps
- * its column rules only while the inset share is above zero. The probes carry the classes the
+ * its column rules only while the inset share is above zero, and always its outer left edge. The probes carry the classes the
  * components compose, so only the roles style them.
  */
 
 type Mode = 'light' | 'dark';
-type Paint = { destructive: string; inset: string; column: string };
+type Paint = { destructive: string; inset: string; column: string; frame: string };
 
 const SOFT_THEME = {
   version: 1,
@@ -80,7 +80,12 @@ function paint(page: Page): Promise<Paint> {
         (node) => getComputedStyle(node).borderTopColor,
       ),
       column: read(
-        '<table><tbody><tr><td>cell</td></tr></tbody></table>',
+        '<table><tbody><tr><td>one</td><td>two</td></tr></tbody></table>',
+        (node) => getComputedStyle(node.querySelectorAll('td')[1]).borderLeftColor,
+        'markdown',
+      ),
+      frame: read(
+        '<table><tbody><tr><td>one</td><td>two</td></tr></tbody></table>',
         (node) => getComputedStyle(node.querySelector('td') as Element).borderLeftColor,
         'markdown',
       ),
@@ -98,7 +103,7 @@ const CASES: Array<{
   title: string;
   mode: Mode;
   definition?: { name: string };
-  expects: { [K in keyof Paint]: RegExp };
+  expects: { [K in Exclude<keyof Paint, 'frame'>]: RegExp };
 }> = [
   {
     title:
@@ -144,6 +149,7 @@ test.describe('prompt editor and table surfaces', () => {
       expect(painted.destructive).toMatch(expects.destructive);
       expect(painted.inset).toMatch(expects.inset);
       expect(painted.column).toMatch(expects.column);
+      expect(painted.frame).toMatch(opaque);
     });
   }
 });

From 3da58de9e792ecbfc0c4c3988e6fd9c3a20a3911 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 21:51:38 +0200
Subject: [PATCH 4/9] fix: Keep the Batched Edit Divider on the Light Border

---
 client/src/components/Chat/Messages/Content/Parts/DiffView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Chat/Messages/Content/Parts/DiffView.tsx b/client/src/components/Chat/Messages/Content/Parts/DiffView.tsx
index ab739b29f8e..d38d6b7f195 100644
--- a/client/src/components/Chat/Messages/Content/Parts/DiffView.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/DiffView.tsx
@@ -172,7 +172,7 @@ interface DiffRowProps {
 const DiffRow = memo(function DiffRow({ type, text, num, hasLineNumbers }: DiffRowProps) {
   if (type === 'hunk') {
     if (!text) {
-      return <div className="border-border-inset mx-3 my-1.5 border-t" />;
+      return <div className="border-border-light mx-3 my-1.5 border-t" />;
     }
     return <div className="text-text-tertiary px-3 py-0.5 text-[11px] select-none">{text}</div>;
   }

From 8ff15f95c161cf1ffc5e5042668761a746020a69 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 22:12:16 +0200
Subject: [PATCH 5/9] fix: Keep Web Search Source Row Separators on the Light
 Border

---
 client/src/components/Chat/Messages/Content/WebSearch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Chat/Messages/Content/WebSearch.tsx b/client/src/components/Chat/Messages/Content/WebSearch.tsx
index 0d72bb73a05..b46f508c4f5 100644
--- a/client/src/components/Chat/Messages/Content/WebSearch.tsx
+++ b/client/src/components/Chat/Messages/Content/WebSearch.tsx
@@ -367,7 +367,7 @@ export default function WebSearch({
                         className={cn(
                           'hover:bg-surface-hover flex gap-2.5 px-3 py-2 transition-colors',
                           snippet ? 'items-start' : 'items-center',
-                          i > 0 && 'border-border-inset border-t',
+                          i > 0 && 'border-border-light border-t',
                         )}
                       >
                         <FaviconImage

From 877eb18d1c8360832e45196a9648a90503211502 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 22:23:40 +0200
Subject: [PATCH 6/9] fix: Quiet the Result Switcher Divider and Keep the RTL
 Table Edge

---
 .../Messages/Content/ResultSwitcher.tsx       |  2 +-
 client/src/style.css                          | 10 ++++---
 .../mock/scenarios/prompt-surfaces.spec.ts    | 29 +++++++++++++++++--
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Messages/Content/ResultSwitcher.tsx b/client/src/components/Messages/Content/ResultSwitcher.tsx
index 7ecf81b414a..8e02f1bc3d6 100644
--- a/client/src/components/Messages/Content/ResultSwitcher.tsx
+++ b/client/src/components/Messages/Content/ResultSwitcher.tsx
@@ -26,7 +26,7 @@ export default function ResultSwitcher({
   return (
     <nav
       aria-label={localize('com_ui_navigate_results')}
-      className="border-border-light bg-surface-code flex items-center justify-center gap-1.5 border-t px-3 py-1.5 text-xs"
+      className="border-border-inset bg-surface-code flex items-center justify-center gap-1.5 border-t px-3 py-1.5 text-xs"
     >
       <button
         type="button"
diff --git a/client/src/style.css b/client/src/style.css
index a9cefdcc279..2418c43ba3c 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1289,10 +1289,12 @@ html[data-drawer-nav] body {
 }
 
 /* The column rules take the inset share of the border-medium edge, so a theme that draws no inset
- * border keeps the row rules and the outer frame only. The first cell's left edge is that frame and
- * stays whole. The selector outranks the cell rules above, which restate the edge in one
- * declaration, and leaves high contrast to its own. */
-html:not(.high-contrast) .markdown :is(th, td):not(:first-child) {
+ * border keeps the row rules and the outer frame only. The outer left edge, the first cell's in a
+ * left-to-right table and the last cell's in a right-to-left one, is the frame and stays whole. The
+ * selectors outrank the cell rules above, which restate the edge in one declaration, and leave
+ * high contrast to its own. */
+html:not(.high-contrast, [dir='rtl']) .markdown :is(th, td):not(:first-child),
+html[dir='rtl']:not(.high-contrast) .markdown :is(th, td):not(:last-child) {
   border-left-color: rgb(
     var(--border-medium) / calc(var(--border-medium-alpha, 1) * var(--theme-border-inset-alpha, 1))
   );
diff --git a/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts b/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
index c2b3d196efb..b265c902517 100644
--- a/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
+++ b/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
@@ -8,12 +8,19 @@ import { NEW_CHAT_PATH } from '../helpers';
  * solid by default and a 10% tint under the destructive ink when the theme's `destructiveStyle` is
  * `soft`; `border-inset-medium` is `border-medium` at the inset share, so the prompt editor's form
  * boxes keep their edge in the bundled themes and drop it in ClickHouse; and a markdown table keeps
- * its column rules only while the inset share is above zero, and always its outer left edge. The probes carry the classes the
+ * its column rules only while the inset share is above zero, and always its outer left edge, whichever way the table is laid out. The probes carry the classes the
  * components compose, so only the roles style them.
  */
 
 type Mode = 'light' | 'dark';
-type Paint = { destructive: string; inset: string; column: string; frame: string };
+type Paint = {
+  destructive: string;
+  inset: string;
+  column: string;
+  frame: string;
+  rtlColumn: string;
+  rtlFrame: string;
+};
 
 const SOFT_THEME = {
   version: 1,
@@ -70,6 +77,12 @@ function paint(page: Page): Promise<Paint> {
       host.remove();
       return value;
     };
+    const rtl = (html: string, pick: (node: Element) => string) => {
+      document.documentElement.dir = 'rtl';
+      const value = read(html, pick, 'markdown');
+      document.documentElement.removeAttribute('dir');
+      return value;
+    };
     return {
       destructive: read(
         '<div class="bg-surface-destructive theme-destructive-soft:bg-surface-destructive/10"></div>',
@@ -89,6 +102,14 @@ function paint(page: Page): Promise<Paint> {
         (node) => getComputedStyle(node.querySelector('td') as Element).borderLeftColor,
         'markdown',
       ),
+      rtlColumn: rtl(
+        '<table><tbody><tr><td>one</td><td>two</td></tr></tbody></table>',
+        (node) => getComputedStyle(node.querySelector('td') as Element).borderLeftColor,
+      ),
+      rtlFrame: rtl(
+        '<table><tbody><tr><td>one</td><td>two</td></tr></tbody></table>',
+        (node) => getComputedStyle(node.querySelectorAll('td')[1]).borderLeftColor,
+      ),
     };
   });
 }
@@ -103,7 +124,7 @@ const CASES: Array<{
   title: string;
   mode: Mode;
   definition?: { name: string };
-  expects: { [K in Exclude<keyof Paint, 'frame'>]: RegExp };
+  expects: { [K in Exclude<keyof Paint, 'frame' | 'rtlColumn' | 'rtlFrame'>]: RegExp };
 }> = [
   {
     title:
@@ -150,6 +171,8 @@ test.describe('prompt editor and table surfaces', () => {
       expect(painted.inset).toMatch(expects.inset);
       expect(painted.column).toMatch(expects.column);
       expect(painted.frame).toMatch(opaque);
+      expect(painted.rtlColumn).toMatch(expects.column);
+      expect(painted.rtlFrame).toMatch(opaque);
     });
   }
 });

From bdc894ee31baa2a9eb85b9a29ebaff39e6bd1fc7 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 6 Oct 2026 00:20:02 +0200
Subject: [PATCH 7/9] fix: Resolve Table Edges by Cell Direction and Keep the
 Variables Card Opaque in Details

---
 .../Prompts/display/PromptVariables.tsx       | 15 +++++++++----
 .../Prompts/forms/CreatePromptForm.tsx        |  2 +-
 .../components/Prompts/forms/PromptForm.tsx   |  2 +-
 client/src/style.css                          | 20 ++++++++++++------
 .../mock/scenarios/prompt-surfaces.spec.ts    | 21 ++++++++++++++-----
 5 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Prompts/display/PromptVariables.tsx b/client/src/components/Prompts/display/PromptVariables.tsx
index a6dffa2dd02..cb857258e9c 100644
--- a/client/src/components/Prompts/display/PromptVariables.tsx
+++ b/client/src/components/Prompts/display/PromptVariables.tsx
@@ -3,7 +3,7 @@ import { Variable, ChevronRight } from 'lucide-react';
 import { specialVariables } from 'librechat-data-provider';
 import type { TSpecialVarLabel } from 'librechat-data-provider';
 import { getSpecialVariableIcon } from '~/components/Prompts/utils';
-import { extractUniqueVariables } from '~/utils';
+import { extractUniqueVariables, cn } from '~/utils';
 import { useLocalize } from '~/hooks';
 
 interface ParsedVariable {
@@ -107,8 +107,15 @@ const SimpleVariableChip = ({ parsed }: { parsed: ParsedVariable }) => (
   </span>
 );
 
-const PromptVariables = ({ promptText }: { promptText: string }) => {
+const PromptVariables = ({
+  promptText,
+  inset = false,
+}: {
+  promptText: string;
+  inset?: boolean;
+}) => {
   const localize = useLocalize();
+  const frame = inset ? 'border-border-inset-medium' : 'border-border-medium';
 
   const variables = useMemo(() => {
     return extractUniqueVariables(promptText || '');
@@ -138,8 +145,8 @@ const PromptVariables = ({ promptText }: { promptText: string }) => {
   }
 
   return (
-    <div className="border-border-inset-medium overflow-hidden rounded-xl border">
-      <header className="border-border-inset-medium flex items-center justify-between border-b p-3">
+    <div className={cn(frame, 'overflow-hidden rounded-xl border')}>
+      <header className={cn(frame, 'flex items-center justify-between border-b p-3')}>
         <div className="flex items-center gap-2">
           <Variable className="text-text-secondary size-4" aria-hidden="true" />
           <h4 className="text-text-primary text-sm font-semibold">
diff --git a/client/src/components/Prompts/forms/CreatePromptForm.tsx b/client/src/components/Prompts/forms/CreatePromptForm.tsx
index 785f9a9e470..663c8169072 100644
--- a/client/src/components/Prompts/forms/CreatePromptForm.tsx
+++ b/client/src/components/Prompts/forms/CreatePromptForm.tsx
@@ -218,7 +218,7 @@ const CreatePromptForm = ({
               />
             </div>
           </div>
-          <PromptVariables promptText={promptText} />
+          <PromptVariables promptText={promptText} inset />
           <Description
             onValueChange={(value) => methods.setValue('oneliner', value)}
             tabIndex={0}
diff --git a/client/src/components/Prompts/forms/PromptForm.tsx b/client/src/components/Prompts/forms/PromptForm.tsx
index 58923c770d4..fe8030aeb63 100644
--- a/client/src/components/Prompts/forms/PromptForm.tsx
+++ b/client/src/components/Prompts/forms/PromptForm.tsx
@@ -547,7 +547,7 @@ const PromptForm = ({ promptId: promptIdProp }: { promptId?: string }) => {
                       isEditing={isEditing}
                       setIsEditing={(value) => canEdit && setIsEditing(value)}
                     />
-                    <PromptVariables promptText={promptText} />
+                    <PromptVariables promptText={promptText} inset />
                     <Description
                       initialValue={group.oneliner ?? ''}
                       onValueChange={canEdit ? handleUpdateOneliner : undefined}
diff --git a/client/src/style.css b/client/src/style.css
index 2418c43ba3c..a259b44487e 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1289,17 +1289,25 @@ html[data-drawer-nav] body {
 }
 
 /* The column rules take the inset share of the border-medium edge, so a theme that draws no inset
- * border keeps the row rules and the outer frame only. The outer left edge, the first cell's in a
- * left-to-right table and the last cell's in a right-to-left one, is the frame and stays whole. The
- * selectors outrank the cell rules above, which restate the edge in one declaration, and leave
- * high contrast to its own. */
-html:not(.high-contrast, [dir='rtl']) .markdown :is(th, td):not(:first-child),
-html[dir='rtl']:not(.high-contrast) .markdown :is(th, td):not(:last-child) {
+ * border keeps the row rules and the outer frame only. Each cell's own resolved direction picks its
+ * edges, since a message can lay a table out right-to-left under a left-to-right page: the outer
+ * left edge, the first cell's in a left-to-right table and the last cell's in a right-to-left one,
+ * is the frame and stays whole, and the right-to-left table's last cell rules its inner right edge
+ * with the rest. The selectors outrank the cell rules above, which restate the edge in one
+ * declaration, and leave high contrast to its own. */
+html:not(.high-contrast) .markdown :is(th, td):dir(ltr):not(:first-child),
+html:not(.high-contrast) .markdown :is(th, td):dir(rtl):not(:last-child) {
   border-left-color: rgb(
     var(--border-medium) / calc(var(--border-medium-alpha, 1) * var(--theme-border-inset-alpha, 1))
   );
 }
 
+html:not(.high-contrast) .markdown :is(th, td):dir(rtl):last-child {
+  border-right-color: rgb(
+    var(--border-medium) / calc(var(--border-medium-alpha, 1) * var(--theme-border-inset-alpha, 1))
+  );
+}
+
 .markdown a {
   text-decoration-line: underline;
   text-underline-offset: 2px;
diff --git a/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts b/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
index b265c902517..b14c194764f 100644
--- a/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
+++ b/e2e/specs/mock/scenarios/prompt-surfaces.spec.ts
@@ -8,7 +8,8 @@ import { NEW_CHAT_PATH } from '../helpers';
  * solid by default and a 10% tint under the destructive ink when the theme's `destructiveStyle` is
  * `soft`; `border-inset-medium` is `border-medium` at the inset share, so the prompt editor's form
  * boxes keep their edge in the bundled themes and drop it in ClickHouse; and a markdown table keeps
- * its column rules only while the inset share is above zero, and always its outer left edge, whichever way the table is laid out. The probes carry the classes the
+ * its column rules only while the inset share is above zero, and always its outer left edge, whichever way the table is laid out, including a right-to-left
+ * table under a left-to-right page. The probes carry the classes the
  * components compose, so only the roles style them.
  */
 
@@ -20,6 +21,7 @@ type Paint = {
   frame: string;
   rtlColumn: string;
   rtlFrame: string;
+  rtlInner: string;
 };
 
 const SOFT_THEME = {
@@ -78,9 +80,13 @@ function paint(page: Page): Promise<Paint> {
       return value;
     };
     const rtl = (html: string, pick: (node: Element) => string) => {
-      document.documentElement.dir = 'rtl';
-      const value = read(html, pick, 'markdown');
-      document.documentElement.removeAttribute('dir');
+      const host = document.createElement('div');
+      host.className = 'markdown';
+      host.dir = 'rtl';
+      host.innerHTML = html;
+      document.body.append(host);
+      const value = pick(host.firstElementChild as Element);
+      host.remove();
       return value;
     };
     return {
@@ -110,6 +116,10 @@ function paint(page: Page): Promise<Paint> {
         '<table><tbody><tr><td>one</td><td>two</td></tr></tbody></table>',
         (node) => getComputedStyle(node.querySelectorAll('td')[1]).borderLeftColor,
       ),
+      rtlInner: rtl(
+        '<table><tbody><tr><td>one</td><td>two</td></tr></tbody></table>',
+        (node) => getComputedStyle(node.querySelectorAll('td')[1]).borderRightColor,
+      ),
     };
   });
 }
@@ -124,7 +134,7 @@ const CASES: Array<{
   title: string;
   mode: Mode;
   definition?: { name: string };
-  expects: { [K in Exclude<keyof Paint, 'frame' | 'rtlColumn' | 'rtlFrame'>]: RegExp };
+  expects: { [K in Exclude<keyof Paint, 'frame' | 'rtlColumn' | 'rtlFrame' | 'rtlInner'>]: RegExp };
 }> = [
   {
     title:
@@ -173,6 +183,7 @@ test.describe('prompt editor and table surfaces', () => {
       expect(painted.frame).toMatch(opaque);
       expect(painted.rtlColumn).toMatch(expects.column);
       expect(painted.rtlFrame).toMatch(opaque);
+      expect(painted.rtlInner).toMatch(expects.column);
     });
   }
 });

From e1a5a642a3241b48c483f16eddd66c589e18b30e Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 6 Oct 2026 00:32:56 +0200
Subject: [PATCH 8/9] fix: Draw Table Frame Edges in Logical Terms So Direction
 Needs No Selector

---
 client/src/style.css | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/client/src/style.css b/client/src/style.css
index a259b44487e..a99c9b34110 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1289,25 +1289,28 @@ html[data-drawer-nav] body {
 }
 
 /* The column rules take the inset share of the border-medium edge, so a theme that draws no inset
- * border keeps the row rules and the outer frame only. Each cell's own resolved direction picks its
- * edges, since a message can lay a table out right-to-left under a left-to-right page: the outer
- * left edge, the first cell's in a left-to-right table and the last cell's in a right-to-left one,
- * is the frame and stays whole, and the right-to-left table's last cell rules its inner right edge
- * with the rest. The selectors outrank the cell rules above, which restate the edge in one
- * declaration, and leave high contrast to its own. */
-html:not(.high-contrast) .markdown :is(th, td):dir(ltr):not(:first-child),
-html:not(.high-contrast) .markdown :is(th, td):dir(rtl):not(:last-child) {
+ * border keeps the row rules and the outer frame only. Every side edge takes the inset share and
+ * the frame, the first cell's start edge and the last cell's end edge, is put back whole in
+ * logical terms, so a table laid out right-to-left, even under a left-to-right page, keeps the
+ * edge that is visually outermost with no selector on direction. The selectors outrank the cell
+ * rules above, which restate the edge in one declaration, and leave high contrast to its own. */
+html:not(.high-contrast) .markdown :is(th, td) {
   border-left-color: rgb(
     var(--border-medium) / calc(var(--border-medium-alpha, 1) * var(--theme-border-inset-alpha, 1))
   );
-}
-
-html:not(.high-contrast) .markdown :is(th, td):dir(rtl):last-child {
   border-right-color: rgb(
     var(--border-medium) / calc(var(--border-medium-alpha, 1) * var(--theme-border-inset-alpha, 1))
   );
 }
 
+html:not(.high-contrast) .markdown :is(th, td):first-child {
+  border-inline-start-color: rgb(var(--border-medium) / var(--border-medium-alpha, 1));
+}
+
+html:not(.high-contrast) .markdown :is(th, td):last-child {
+  border-inline-end-color: rgb(var(--border-medium) / var(--border-medium-alpha, 1));
+}
+
 .markdown a {
   text-decoration-line: underline;
   text-underline-offset: 2px;

From 303b6322a98cd9853f5a43aa5e80c8092c24e505 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 6 Oct 2026 00:42:37 +0200
Subject: [PATCH 9/9] fix: Keep Soft Destructive Hover and Pressed Tints Above
 4.5:1

---
 packages/client/src/components/Button.spec.tsx | 3 +++
 packages/client/src/components/Button.tsx      | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/Button.spec.tsx b/packages/client/src/components/Button.spec.tsx
index f012f803c0c..b14db9eef9c 100644
--- a/packages/client/src/components/Button.spec.tsx
+++ b/packages/client/src/components/Button.spec.tsx
@@ -17,6 +17,9 @@ describe('Button', () => {
     expect(destructive).toContain('text-text-on-status');
     expect(destructive).toContain('theme-destructive-soft:bg-surface-destructive/10');
     expect(destructive).toContain('theme-destructive-soft:text-text-destructive');
+    // The ink stays at 4.5:1 over the light-theme tint only below a 20% hover and pressed share.
+    expect(destructive).toContain('theme-destructive-soft:hover:bg-surface-destructive/14');
+    expect(destructive).toContain('theme-destructive-soft:hover:active:bg-surface-destructive/17');
   });
 
   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 f96cf98ee66..eca8e6dabd8 100644
--- a/packages/client/src/components/Button.tsx
+++ b/packages/client/src/components/Button.tsx
@@ -61,7 +61,7 @@ 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 theme-destructive-soft:bg-surface-destructive/10 theme-destructive-soft:text-text-destructive theme-destructive-soft:hover:bg-surface-destructive/20 theme-destructive-soft:hover:active:bg-surface-destructive/30',
+          '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',
         /** An outlined filter whose pressed state stays visible between activations. */