♻️ Use DS buttons in the debug shape panel (#12484)

* ♻️ Use DS buttons in the debug shape panel

The object and tree dump buttons of the debug shape panel were raw
buttons with the browser default look. Use DS secondary buttons. The
DS buttons are taller, so the title row centers the shape name.

Add a visual test that turns on the shape-panel debug option and shows
the title row of the selected shape.

AI-assisted-by: claude-opus-5-5

* ♻️ Move debug shape panel styles off the deprecated styles

Move debug_shape_info.scss to DS spacing tokens, borders and logical
properties, resolve the panel background alias, and drop the refactor
import. The two font sizes match no DS typography, so they stay with a
TODO, and the unused shape-info-title class is commented out for a
manual check. The panel looks the same as with the previous commit.

AI-assisted-by: claude-opus-5-5

* 🐛 Let the debugging tools options scroll

The debugging tools panel lists 32 options in the left sidebar, whose
content area hides what overflows. On a short window the last options
were cut off with no way to reach them. Make the options list fill the
space under the title and scroll on its own.

AI-assisted-by: claude-opus-5-5

* ♻️ Move debugging tools panel styles to DS tokens

Move debug.scss spacing, size and the panel background alias to DS
tokens and logical properties. The refactor import stays only for the
checkbox placeholders, until the checkboxes move to the DS. The panel
looks the same as before.

AI-assisted-by: claude-opus-5-5

frontend/playwright/ui/visual-specs/workspace.spec.js

@@ -389,6 +389,35 @@ test.describe("Assets tab", () => {
   });
 });
 
+test.describe("Debug shape panel", () => {
+  test("Shows the debug info of the selected shape", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(/get\-file\?/, "workspace/get-file-9066.json");
+    await workspace.goToWorkspace({
+      fileId: "e179d9df-de35-80bf-8005-283bbd5516b0",
+      pageId: "e179d9df-de35-80bf-8005-283bbd5516b1",
+    });
+
+    await workspace.clickLeafLayer("Board");
+    await page.getByRole("button", { name: "Debugging tool" }).click();
+    await page.getByText("shape-panel", { exact: true }).click();
+    await expect(
+      workspace.rightSidebar.getByText("Board", { exact: true }),
+    ).toBeVisible();
+    await page.mouse.move(640, 600);
+    // Only the title row with the dump buttons: the attributes list below
+    // holds ids that change on every run.
+    const title = workspace.rightSidebar
+      .getByText("Board", { exact: true })
+      .locator("..");
+    await expect(title).toHaveScreenshot({
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
+});
+
 test.describe("Guides", () => {
   test("Shows the advanced options of a square guide", async ({ page }) => {
     // A taller window keeps the whole Design tab visible: a scrolled

frontend/src/app/main/ui/workspace/sidebar/debug.scss

@@ -4,26 +4,34 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
+@use "ds/_sizes.scss" as *;
+
+// Only for the checkbox placeholders (%input-checkbox, %checkbox-icon),
+// until the checkboxes move to the DS.
 @use "refactor/common-refactor.scss" as deprecated;
 
 .debug-panel {
   display: flex;
   flex-direction: column;
-  background-color: var(--panel-background-color);
+  background-color: var(--color-background-primary);
 }
 
 .debug-panel-title {
   margin: var(--sp-s) var(--sp-s) 0 var(--sp-s);
 }
 
+// The options list scrolls under the title when it does not fit.
 .debug-panel-inner {
-  padding: deprecated.$s-16 deprecated.$s-8;
+  flex: 1;
+  min-block-size: 0;
+  overflow-y: auto;
+  padding: var(--sp-l) var(--sp-s);
 }
 
 .checkbox-wrapper {
   @extend %input-checkbox;
 
-  height: deprecated.$s-32;
+  block-size: $sz-32;
   padding: 0;
 }
 

frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs

@@ -13,6 +13,7 @@
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [debug :as dbg]
    [rumext.v2 :as mf]))
 
@@ -130,8 +131,12 @@
          [:div {:class (stl/css :attrs-container) :key (dm/str "shape" idx)}
           [:div {:class (stl/css :shape-title)}
            [:div {:class (stl/css :shape-name)} (:name current)]
-           [:button {:on-click #(debug/dump-object (dm/str (:id current)))} "object"]
-           [:button {:on-click #(debug/dump-subtree (dm/str (:id current)) true)} "tree"]]
+           [:> button* {:variant "secondary"
+                        :on-click #(debug/dump-object (dm/str (:id current)))}
+            "object"]
+           [:> button* {:variant "secondary"
+                        :on-click #(debug/dump-subtree (dm/str (:id current)) true)}
+            "tree"]]
 
           [:div {:class (stl/css :shape-attrs)}
            (let [attrs (get-attrs current)]

frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss

@@ -4,34 +4,42 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .shape-info {
   display: flex;
   flex-direction: column;
-  background-color: var(--panel-background-color);
+  background-color: var(--color-background-primary);
   color: var(--color-foreground-primary);
-  font-size: deprecated.$fs-12;
+
+  // TODO: No exact DS typography match found.
+  // Closest match: body-small.
+  font-size: px2rem(12);
   user-select: text;
 }
 
-.shape-info-title {
-  margin: var(--sp-s) var(--sp-s) 0 var(--sp-s);
-}
+// TODO: Unused in debug_shape_info.cljs; check by hand before removing.
+// .shape-info-title {
+//   margin: var(--sp-s) var(--sp-s) 0 var(--sp-s);
+// }
 
 .attrs-container {
-  padding: deprecated.$s-16 deprecated.$s-8;
+  padding: var(--sp-l) var(--sp-s);
   overflow: hidden;
 }
 
 .shape-title {
-  font-size: deprecated.$fs-14;
+  // TODO: No exact DS typography match found.
+  // Closest match: body-medium.
+  font-size: px2rem(14);
   background: var(--color-background-quaternary);
   color: var(--color-foreground-primary);
-  padding: deprecated.$s-8;
-  border-radius: deprecated.$s-8;
+  padding: var(--sp-s);
+  border-radius: $br-8;
   display: flex;
-  gap: deprecated.$s-4;
+  align-items: center;
+  gap: var(--sp-xs);
 }
 
 .shape-name {
@@ -41,7 +49,7 @@
 .attrs-container-attr {
   display: grid;
   grid-template-columns: 25% auto;
-  padding: deprecated.$s-4 0;
+  padding: var(--sp-xs) 0;
 
   &.vertical-layout {
     grid-template-columns: auto;
@@ -51,8 +59,8 @@
 
 .shape-attrs {
   overflow: auto;
-  height: calc(100% - 8px);
-  padding-bottom: 8px;
+  block-size: calc(100% - var(--sp-s));
+  padding-block-end: var(--sp-s);
 }
 
 .shape-link {
@@ -63,15 +71,15 @@
 .shape-list {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-4;
+  gap: var(--sp-xs);
 }
 
 .point-list {
   display: flex;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .cell-container {
   display: grid;
-  grid-template-columns: 100px 1fr;
+  grid-template-columns: px2rem(100) 1fr;
 }