From 29b00f85350868c2d261b72e420808799197f051 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Mon, 26 Oct 2026 10:31:14 +0100
Subject: [PATCH] :recycle: Use DS icons in the text palette and its menu
 (#12452)

* :recycle: Use DS icons in the text palette and its menu

The scroll arrows of the text palette and the tick of the selected
palette in its menu used deprecated icons; use the DS arrow and tick
icons instead. The arrows are full-height scroll buttons with a fade, not
DS button sizes, so they stay raw buttons.

Add a visual test that opens a file with 16 local typographies, so the
arrows show, and captures the palette at rest, with the pointer over the
right arrow, after scrolling and with its menu open. Its fixture is the
library fixture with more typographies.

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

* :recycle: Move text palette styles off the deprecated styles

Inline the button, flex and ellipsis mixins, move spacing, sizes and
borders to DS tokens and logical properties, and resolve the color
aliases to their DS tokens. The arrow, item and menu colors that change
on hover, disable or selection go through local variables, and the new
icons take them through currentColor instead of svg selectors. The three
typography lines share their ellipsis rule. The .disabled ::after rule
of the left arrow never matched and goes away; :disabled::after already
covers it.

The items, the empty message and the menu use the DS body-small
typography, whose line-height is 1.3 instead of 1.4. The arrows keep
their z-index, now commented, and the menu its legacy context menu one.

text_palette.scss and text_palette_ctx_menu.scss no longer import
refactor/.

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

* :bug: Show the text palette scroll arrows at rest

The enabled scroll arrows of the text palette had no color at rest, so
they only showed on hover, while the color palette arrows show in the
secondary color. Give them the same rest color.

AI-assisted-by: claude-opus-5-5
---
 .../workspace/get-file-many-typographies.json | 465 ++++++++++++++++++
 .../ui/visual-specs/workspace.spec.js         |  51 ++
 .../app/main/ui/workspace/text_palette.cljs   |   8 +-
 .../app/main/ui/workspace/text_palette.scss   | 131 +++--
 .../ui/workspace/text_palette_ctx_menu.cljs   |   6 +-
 .../ui/workspace/text_palette_ctx_menu.scss   |  87 ++--
 6 files changed, 621 insertions(+), 127 deletions(-)
 create mode 100644 frontend/playwright/data/workspace/get-file-many-typographies.json

diff --git a/frontend/playwright/data/workspace/get-file-many-typographies.json b/frontend/playwright/data/workspace/get-file-many-typographies.json
new file mode 100644
index 0000000000..1ec32392eb
--- /dev/null
+++ b/frontend/playwright/data/workspace/get-file-many-typographies.json
@@ -0,0 +1,465 @@
+{
+  "~:features": {
+    "~#set": [
+      "layout/grid",
+      "styles/v2",
+      "components/v2",
+      "fdata/shape-data-type"
+    ]
+  },
+  "~:permissions": {
+    "~:type": "~:membership",
+    "~:is-owner": true,
+    "~:is-admin": true,
+    "~:can-edit": true,
+    "~:can-read": true,
+    "~:is-logged": true
+  },
+  "~:has-media-trimmed": false,
+  "~:comment-thread-seqn": 0,
+  "~:name": "Many typographies",
+  "~:revn": 2,
+  "~:modified-at": "~m1717512948250",
+  "~:id": "~uc1249a66-fce0-8175-8004-7433fe4be8bc",
+  "~:is-shared": true,
+  "~:version": 48,
+  "~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b",
+  "~:created-at": "~m1717512934704",
+  "~:data": {
+    "~:pages": [
+      "~uc1249a66-fce0-8175-8004-7433fe4be8bd"
+    ],
+    "~:pages-index": {
+      "~uc1249a66-fce0-8175-8004-7433fe4be8bd": {
+        "~:options": {},
+        "~:objects": {
+          "~u00000000-0000-0000-0000-000000000000": {
+            "~#shape": {
+              "~:y": 0,
+              "~:hide-fill-on-export": false,
+              "~:transform": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:rotation": 0,
+              "~:name": "Root Frame",
+              "~:width": 0.01,
+              "~:type": "~:frame",
+              "~:points": [
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 0
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0.01,
+                    "~:y": 0
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0.01,
+                    "~:y": 0.01
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 0,
+                    "~:y": 0.01
+                  }
+                }
+              ],
+              "~:proportion-lock": false,
+              "~:transform-inverse": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:id": "~u00000000-0000-0000-0000-000000000000",
+              "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:strokes": [],
+              "~:x": 0,
+              "~:proportion": 1.0,
+              "~:selrect": {
+                "~#rect": {
+                  "~:x": 0,
+                  "~:y": 0,
+                  "~:width": 0.01,
+                  "~:height": 0.01,
+                  "~:x1": 0,
+                  "~:y1": 0,
+                  "~:x2": 0.01,
+                  "~:y2": 0.01
+                }
+              },
+              "~:fills": [
+                {
+                  "~:fill-color": "#FFFFFF",
+                  "~:fill-opacity": 1
+                }
+              ],
+              "~:flip-x": null,
+              "~:height": 0.01,
+              "~:flip-y": null,
+              "~:shapes": [
+                "~uc70224ec-c410-807b-8004-743400e00be8"
+              ]
+            }
+          },
+          "~uc70224ec-c410-807b-8004-743400e00be8": {
+            "~#shape": {
+              "~:y": 255,
+              "~:r1": 0,
+              "~:r2": 0,
+              "~:r3": 0,
+              "~:r4": 0,
+              "~:transform": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:rotation": 0,
+              "~:grow-type": "~:fixed",
+              "~:hide-in-viewer": false,
+              "~:name": "Rectangle",
+              "~:width": 279.0000000000001,
+              "~:type": "~:rect",
+              "~:points": [
+                {
+                  "~#point": {
+                    "~:x": 523,
+                    "~:y": 255
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 802.0000000000001,
+                    "~:y": 255
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 802.0000000000001,
+                    "~:y": 534
+                  }
+                },
+                {
+                  "~#point": {
+                    "~:x": 523,
+                    "~:y": 534
+                  }
+                }
+              ],
+              "~:proportion-lock": false,
+              "~:transform-inverse": {
+                "~#matrix": {
+                  "~:a": 1.0,
+                  "~:b": 0.0,
+                  "~:c": 0.0,
+                  "~:d": 1.0,
+                  "~:e": 0.0,
+                  "~:f": 0.0
+                }
+              },
+              "~:id": "~uc70224ec-c410-807b-8004-743400e00be8",
+              "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+              "~:strokes": [],
+              "~:x": 523,
+              "~:proportion": 1,
+              "~:selrect": {
+                "~#rect": {
+                  "~:x": 523,
+                  "~:y": 255,
+                  "~:width": 279.0000000000001,
+                  "~:height": 279,
+                  "~:x1": 523,
+                  "~:y1": 255,
+                  "~:x2": 802.0000000000001,
+                  "~:y2": 534
+                }
+              },
+              "~:fills": [
+                {
+                  "~:fill-color": "#B1B2B5",
+                  "~:fill-opacity": 1
+                }
+              ],
+              "~:flip-x": null,
+              "~:ry": 0,
+              "~:height": 279,
+              "~:flip-y": null
+            }
+          }
+        },
+        "~:id": "~uc1249a66-fce0-8175-8004-7433fe4be8bd",
+        "~:name": "Page 1"
+      }
+    },
+    "~:id": "~uc1249a66-fce0-8175-8004-7433fe4be8bc",
+    "~:options": {
+      "~:components-v2": true
+    },
+    "~:recent-colors": [
+      {
+        "~:color": "#187cd5",
+        "~:opacity": 1
+      }
+    ],
+    "~:colors": {
+      "~uc70224ec-c410-807b-8004-74340616cffb": {
+        "~:path": "",
+        "~:color": "#187cd5",
+        "~:name": "test-color-187cd5",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616cffb"
+      }
+    },
+    "~:typographies": {
+      "~ue117f7f6-433c-807e-8004-862ab6ae3000": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "12",
+        "~:font-weight": "400",
+        "~:name": "Type 01 Regular 12",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3000",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3001": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "12",
+        "~:font-weight": "700",
+        "~:name": "Type 02 Bold 12",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3001",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3002": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "14",
+        "~:font-weight": "400",
+        "~:name": "Type 03 Regular 14",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3002",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3003": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "14",
+        "~:font-weight": "700",
+        "~:name": "Type 04 Bold 14",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3003",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3004": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "16",
+        "~:font-weight": "400",
+        "~:name": "Type 05 Regular 16",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3004",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3005": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "16",
+        "~:font-weight": "700",
+        "~:name": "Type 06 Bold 16",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3005",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3006": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "18",
+        "~:font-weight": "400",
+        "~:name": "Type 07 Regular 18",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3006",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3007": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "18",
+        "~:font-weight": "700",
+        "~:name": "Type 08 Bold 18",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3007",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3008": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "20",
+        "~:font-weight": "400",
+        "~:name": "Type 09 Regular 20",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3008",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae3009": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "20",
+        "~:font-weight": "700",
+        "~:name": "Type 10 Bold 20",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae3009",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300a": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "22",
+        "~:font-weight": "400",
+        "~:name": "Type 11 Regular 22",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300a",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300b": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "22",
+        "~:font-weight": "700",
+        "~:name": "Type 12 Bold 22",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300b",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300c": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "24",
+        "~:font-weight": "400",
+        "~:name": "Type 13 Regular 24",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300c",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300d": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "24",
+        "~:font-weight": "700",
+        "~:name": "Type 14 Bold 24",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300d",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300e": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "26",
+        "~:font-weight": "400",
+        "~:name": "Type 15 Regular 26",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "regular",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300e",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab6ae300f": {
+        "~:line-height": "1.2",
+        "~:font-style": "normal",
+        "~:text-transform": "none",
+        "~:font-id": "sourcesanspro",
+        "~:font-size": "26",
+        "~:font-weight": "700",
+        "~:name": "Type 16 Bold 26",
+        "~:modified-at": "~m1718718464655",
+        "~:font-variant-id": "700",
+        "~:id": "~ue117f7f6-433c-807e-8004-862ab6ae300f",
+        "~:letter-spacing": "0",
+        "~:font-family": "sourcesanspro"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js
index db5a1002aa..807d1a45cd 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -772,6 +772,57 @@ test.describe("Nudge modal", () => {
   });
 });
 
+test.describe("Text palette", () => {
+  test("Shows the scroll arrows and the palette menu", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(
+      /get\-file\?/,
+      "workspace/get-file-many-typographies.json",
+    );
+    await workspace.goToWorkspace({
+      fileId: "c1249a66-fce0-8175-8004-7433fe4be8bc",
+      pageId: "c1249a66-fce0-8175-8004-7433fe4be8bd",
+    });
+
+    await workspace.palette
+      .getByRole("button", { name: "Typographies" })
+      .click();
+    await expect(
+      workspace.palette.getByText("Type 01 Regular 12"),
+    ).toBeVisible();
+    await page.mouse.move(640, 300);
+    // The arrows are a small part of the palette: compare every pixel.
+    await expect(workspace.palette).toHaveScreenshot("text-palette.png", {
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+
+    const rightArrow = workspace.palette.locator('[class*="right-arrow"]');
+    await rightArrow.hover();
+    await expect(workspace.palette).toHaveScreenshot(
+      "text-palette-arrow-hover.png",
+      { maxDiffPixelRatio: 0, threshold: 0 },
+    );
+
+    await rightArrow.click();
+    await page.mouse.move(640, 300);
+    await expect(workspace.palette).toHaveScreenshot(
+      "text-palette-scrolled.png",
+      { maxDiffPixelRatio: 0, threshold: 0 },
+    );
+
+    await workspace.palette.locator('[class*="palette-actions"]').click();
+    await expect(page.getByText("File library")).toBeVisible();
+    await page.mouse.move(640, 300);
+    await expect(page).toHaveScreenshot("text-palette-menu.png", {
+      clip: { x: 300, y: 450, width: 700, height: 270 },
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
+});
+
 test.describe("Selected colors", () => {
   test("Shows the more colors button", async ({ page }) => {
     const workspace = new WorkspacePage(page);
diff --git a/frontend/src/app/main/ui/workspace/text_palette.cljs b/frontend/src/app/main/ui/workspace/text_palette.cljs
index b65d5842f7..e951b6120b 100644
--- a/frontend/src/app/main/ui/workspace/text_palette.cljs
+++ b/frontend/src/app/main/ui/workspace/text_palette.cljs
@@ -14,7 +14,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.object :as obj]
@@ -144,7 +144,8 @@
      (when show-arrows?
        [:button {:class (stl/css :left-arrow)
                  :disabled (= offset 0)
-                 :on-click on-left-arrow-click} deprecated-icon/arrow])
+                 :on-click on-left-arrow-click}
+        [:> icon* {:icon-id i/arrow :class (stl/css :arrow-icon)}]])
 
      [:div {:class (stl/css :text-palette-content)
             :ref container
@@ -173,7 +174,8 @@
      (when show-arrows?
        [:button {:class (stl/css :right-arrow)
                  :disabled (= offset max-offset)
-                 :on-click on-right-arrow-click} deprecated-icon/arrow])]))
+                 :on-click on-right-arrow-click}
+        [:> icon* {:icon-id i/arrow :class (stl/css :arrow-icon)}]])]))
 
 (mf/defc text-palette*
   {::mf/wrap [mf/memo]}
diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss
index 61cf22e34b..32dd942dc9 100644
--- a/frontend/src/app/main/ui/workspace/text_palette.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette.scss
@@ -4,54 +4,56 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 
 .text-palette {
-  height: 100%;
+  block-size: 100%;
   display: flex;
 }
 
+// Raw buttons on purpose: full-height scroll arrows with a fade, not DS
+// button sizes.
 .left-arrow,
 .right-arrow {
-  @include deprecated.button-style;
-  @include deprecated.flex-center;
+  --arrow-foreground-color: var(--color-foreground-secondary);
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
-  height: 100%;
-  width: deprecated.$s-24;
+  block-size: 100%;
+  inline-size: $sz-24;
   padding: 0;
-  z-index: deprecated.$z-index-2;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--arrow-foreground-color);
 
-  svg {
-    @extend %button-icon;
-  }
+  // Above the typography list, which is positioned and comes after the
+  // left arrow, so the fade covers the items that scroll under it.
+  z-index: 2;
 
   &::after {
     content: "";
     position: absolute;
-    bottom: 0;
-    left: calc(-1 * deprecated.$s-80);
-    height: 100%;
-    width: deprecated.$s-80;
-    z-index: deprecated.$z-index-1;
-    background-image: linear-gradient(
-      to left,
-      var(--palette-button-shadow-initial) 0%,
-      var(--palette-button-shadow-final) 100%
-    );
+    inset-block-end: 0;
+    inset-inline-start: calc(-1 * px2rem(80));
+    block-size: 100%;
+    inline-size: px2rem(80);
+    z-index: 1;
+    background-image: linear-gradient(to left, var(--color-background-primary) 0%, transparent 100%);
     pointer-events: none;
   }
 
   &:hover {
-    svg {
-      stroke: var(--button-foreground-hover);
-    }
+    --arrow-foreground-color: var(--color-accent-primary);
   }
 
   &:disabled {
-    svg {
-      stroke: var(--button-foreground-color-disabled);
-    }
+    --arrow-foreground-color: var(--color-foreground-disabled);
 
     &::after {
       background-image: none;
@@ -61,19 +63,11 @@
 
 .left-arrow {
   &::after {
-    left: deprecated.$s-24;
-    background-image: linear-gradient(
-      to right,
-      var(--palette-button-shadow-initial) 0%,
-      var(--palette-button-shadow-final) 100%
-    );
+    inset-inline-start: $sz-24;
+    background-image: linear-gradient(to right, var(--color-background-primary) 0%, transparent 100%);
   }
 
-  &.disabled ::after {
-    background-image: none;
-  }
-
-  svg {
+  .arrow-icon {
     transform: rotate(180deg);
   }
 }
@@ -85,55 +79,46 @@
 
 .text-palette-inside {
   display: flex;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .typography-item {
-  @include deprecated.body-small-typography;
+  --typography-item-background-color: var(--color-background-tertiary);
+
+  @include use-typography("body-small");
 
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  height: 100%;
-  width: deprecated.$s-136;
-  padding: deprecated.$s-8;
-  border-radius: deprecated.$br-8;
-  background-color: var(--palette-text-background-color);
+  block-size: 100%;
+  inline-size: px2rem(136);
+  padding: var(--sp-s);
+  border-radius: $br-8;
+  background-color: var(--typography-item-background-color);
 
   &:first-child {
-    margin-left: deprecated.$s-8;
+    margin-inline-start: var(--sp-s);
+  }
+
+  .typography-name,
+  .typography-font,
+  .typography-data {
+    display: block;
+    max-inline-size: 99%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    block-size: $sz-16;
+    inline-size: $sz-120;
+    color: var(--color-foreground-secondary);
   }
 
   .typography-name {
-    @include deprecated.text-ellipsis;
-
-    height: deprecated.$s-16;
-    width: deprecated.$s-120;
-    color: var(--palette-text-color-selected);
-  }
-
-  .typography-font {
-    @include deprecated.text-ellipsis;
-
-    height: deprecated.$s-16;
-    width: deprecated.$s-120;
-    color: var(--palette-text-color);
-  }
-
-  .typography-data {
-    @include deprecated.text-ellipsis;
-
-    height: deprecated.$s-16;
-    width: deprecated.$s-120;
-    color: var(--palette-text-color);
+    color: var(--color-foreground-primary);
   }
 
   &.mid-item {
-    .typography-name {
-      height: deprecated.$s-16;
-    }
-
     .typography-data {
       display: none;
     }
@@ -147,12 +132,12 @@
   }
 
   &:hover {
-    background-color: var(--palette-text-background-color-hover);
+    --typography-item-background-color: var(--color-background-quaternary);
   }
 }
 
 .text-palette-empty {
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
-  color: var(--palette-text-color);
+  color: var(--color-foreground-secondary);
 }
diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
index cdc13170f2..fd4ef95f3b 100644
--- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
@@ -10,7 +10,7 @@
    [app.common.data.macros :as dm]
    [app.main.refs :as refs]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -37,7 +37,7 @@
 
            (when (= selected (:id cur-library))
              [:span {:class (stl/css :icon-wrapper)}
-              deprecated-icon/tick])]))
+              [:> icon* {:icon-id i/tick :size "s"}]])]))
 
       [:li
        {:class (stl/css-case :file-library true
@@ -51,4 +51,4 @@
          (dm/str "(" (count typographies) ")")]]
        (when (= selected :file)
          [:span {:class (stl/css :icon-wrapper)}
-          deprecated-icon/tick])]]]))
+          [:> icon* {:icon-id i/tick :size "s"}]])]]]))
diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
index 9cf70b7e93..bc1ca05c25 100644
--- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
@@ -4,86 +4,77 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 
 .text-context-menu {
   position: absolute;
-  left: auto;
-  bottom: var(--height);
-  max-width: deprecated.$s-480;
-  padding: deprecated.$s-4;
-  margin: 0 0 deprecated.$s-4 0;
-  z-index: deprecated.$z-index-4;
-  border-radius: deprecated.$br-10;
-  background-color: var(--context-menu-background-color);
+  inset-inline-start: auto;
+  inset-block-end: var(--height);
+  max-inline-size: $sz-480;
+  padding: var(--sp-xs);
+  margin: 0 0 var(--sp-xs) 0;
+
+  // Context menu level of the legacy scale, inside the palette.
+  z-index: 4;
+  border-radius: px2rem(10);
+  background-color: var(--color-background-tertiary);
 
   .palette-library,
   .file-library {
+    --library-foreground-color: var(--color-foreground-secondary);
+
     position: relative;
     display: flex;
     justify-content: space-between;
-    width: 100%;
-    gap: deprecated.$s-8;
-    padding: deprecated.$s-8;
-    margin-bottom: deprecated.$s-4;
-    border-radius: deprecated.$br-8;
+    inline-size: 100%;
+    gap: var(--sp-s);
+    padding: var(--sp-s);
+    margin-block-end: var(--sp-xs);
+    border-radius: $br-8;
 
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
 
     .library-name {
-      @include deprecated.body-small-typography;
+      @include use-typography("body-small");
 
-      color: var(--context-menu-foreground-color);
+      color: var(--library-foreground-color);
       display: grid;
-      grid-template-columns: 1fr deprecated.$s-24;
-      max-width: deprecated.$s-400;
+      grid-template-columns: 1fr $sz-24;
+      max-inline-size: $sz-400;
 
       .lib-name {
-        @include deprecated.text-ellipsis;
-
-        max-width: deprecated.$s-380;
+        display: block;
+        max-inline-size: px2rem(380);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .lib-num {
-        margin-left: deprecated.$s-4;
+        margin-inline-start: var(--sp-xs);
       }
     }
 
     .icon-wrapper {
-      margin-left: deprecated.$s-4;
-
-      @include deprecated.flex-center;
-
-      svg {
-        @include deprecated.flex-center;
-        @extend %button-icon-small;
-
-        stroke: var(--icon-foreground);
-      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-inline-start: var(--sp-xs);
+      color: var(--library-foreground-color);
     }
 
     &.selected,
     &:hover {
-      .icon-wrapper {
-        @include deprecated.flex-center;
-
-        svg {
-          @include deprecated.flex-center;
-          @extend %button-icon-small;
-
-          stroke: var(--context-menu-foreground-color-selected);
-        }
-      }
-
-      .library-name {
-        color: var(--context-menu-foreground-color-selected);
-      }
+      --library-foreground-color: var(--color-foreground-primary);
     }
 
     &:hover {
-      background-color: var(--context-menu-background-color-selected);
+      background-color: var(--color-background-quaternary);
     }
   }
 }