From 904f456c61b396c5f9943335448cff73af3b2929 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Mon, 26 Oct 2026 10:27:13 +0100
Subject: [PATCH] :recycle: Use DS icons in the color palette and its menu
 (#12444)

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

The scroll arrows of the color 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. The color cells are swatches
and stay as they are.

Add a visual test that opens a file with 24 local colors, so the arrows
show, and captures the palette before and after scrolling and with its
menu open. Its fixture is the library fixture with more colors.

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

* :recycle: Move color 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 and menu item 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 empty palette message and the menu items use the DS body-small
typography, whose line-height is 1.3 instead of 1.4. The arrows keep
their z-index, now commented: the left arrow comes before the
positioned color list, so without it the colors would cover its fade.
The menu keeps its legacy context menu z-index, also commented.

color_palette.scss and color_palette_ctx_menu.scss no longer import
refactor/.

AI-assisted-by: claude-opus-5-5
---
 .../data/workspace/get-file-many-colors.json  | 423 ++++++++++++++++++
 .../ui/visual-specs/workspace.spec.js         |  44 ++
 .../app/main/ui/workspace/color_palette.cljs  |  10 +-
 .../app/main/ui/workspace/color_palette.scss  |  92 ++--
 .../ui/workspace/color_palette_ctx_menu.cljs  |   8 +-
 .../ui/workspace/color_palette_ctx_menu.scss  |  90 ++--
 6 files changed, 561 insertions(+), 106 deletions(-)
 create mode 100644 frontend/playwright/data/workspace/get-file-many-colors.json

diff --git a/frontend/playwright/data/workspace/get-file-many-colors.json b/frontend/playwright/data/workspace/get-file-many-colors.json
new file mode 100644
index 0000000000..bd2c2816c2
--- /dev/null
+++ b/frontend/playwright/data/workspace/get-file-many-colors.json
@@ -0,0 +1,423 @@
+{
+  "~: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 colors",
+  "~: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-74340616d000": {
+        "~:path": "",
+        "~:color": "#d84b4b",
+        "~:name": "color-01",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d000"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d001": {
+        "~:path": "",
+        "~:color": "#d86f4b",
+        "~:name": "color-02",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d001"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d002": {
+        "~:path": "",
+        "~:color": "#d8924b",
+        "~:name": "color-03",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d002"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d003": {
+        "~:path": "",
+        "~:color": "#d8b54b",
+        "~:name": "color-04",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d003"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d004": {
+        "~:path": "",
+        "~:color": "#d8d84b",
+        "~:name": "color-05",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d004"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d005": {
+        "~:path": "",
+        "~:color": "#b5d84b",
+        "~:name": "color-06",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d005"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d006": {
+        "~:path": "",
+        "~:color": "#92d84b",
+        "~:name": "color-07",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d006"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d007": {
+        "~:path": "",
+        "~:color": "#6fd84b",
+        "~:name": "color-08",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d007"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d008": {
+        "~:path": "",
+        "~:color": "#4bd84b",
+        "~:name": "color-09",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d008"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d009": {
+        "~:path": "",
+        "~:color": "#4bd86f",
+        "~:name": "color-10",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d009"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00a": {
+        "~:path": "",
+        "~:color": "#4bd892",
+        "~:name": "color-11",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00a"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00b": {
+        "~:path": "",
+        "~:color": "#4bd8b5",
+        "~:name": "color-12",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00b"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00c": {
+        "~:path": "",
+        "~:color": "#4bd8d8",
+        "~:name": "color-13",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00c"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00d": {
+        "~:path": "",
+        "~:color": "#4bb5d8",
+        "~:name": "color-14",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00d"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00e": {
+        "~:path": "",
+        "~:color": "#4b92d8",
+        "~:name": "color-15",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00e"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d00f": {
+        "~:path": "",
+        "~:color": "#4b6fd8",
+        "~:name": "color-16",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d00f"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d010": {
+        "~:path": "",
+        "~:color": "#4b4bd8",
+        "~:name": "color-17",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d010"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d011": {
+        "~:path": "",
+        "~:color": "#6f4bd8",
+        "~:name": "color-18",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d011"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d012": {
+        "~:path": "",
+        "~:color": "#924bd8",
+        "~:name": "color-19",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d012"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d013": {
+        "~:path": "",
+        "~:color": "#b54bd8",
+        "~:name": "color-20",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d013"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d014": {
+        "~:path": "",
+        "~:color": "#d84bd8",
+        "~:name": "color-21",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d014"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d015": {
+        "~:path": "",
+        "~:color": "#d84bb5",
+        "~:name": "color-22",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d015"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d016": {
+        "~:path": "",
+        "~:color": "#d84b92",
+        "~:name": "color-23",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d016"
+      },
+      "~uc70224ec-c410-807b-8004-74340616d017": {
+        "~:path": "",
+        "~:color": "#d84b6f",
+        "~:name": "color-24",
+        "~:modified-at": "~m1717512945259",
+        "~:opacity": 1,
+        "~:id": "~uc70224ec-c410-807b-8004-74340616d017"
+      }
+    }
+  }
+}
\ 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 92ac8dddb0..db5a1002aa 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -28,6 +28,50 @@ const setupFileWithAssets = async (workspace) => {
   return { fileId, pageId };
 };
 
+test.describe("Color 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-colors.json",
+    );
+    await workspace.goToWorkspace({
+      fileId: "c1249a66-fce0-8175-8004-7433fe4be8bc",
+      pageId: "c1249a66-fce0-8175-8004-7433fe4be8bd",
+    });
+
+    await workspace.clickColorPalette();
+    await workspace.palette.locator('[class*="palette-actions"]').click();
+    await page.getByText("File library").click();
+    await expect(
+      workspace.palette.getByRole("button", { name: "color-01" }),
+    ).toBeVisible();
+    await page.mouse.move(640, 300);
+    // The arrows are a small part of the palette: compare every pixel.
+    await expect(workspace.palette).toHaveScreenshot("color-palette.png", {
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+
+    await workspace.palette.locator('[class*="right-arrow"]').click();
+    await page.mouse.move(640, 300);
+    await expect(workspace.palette).toHaveScreenshot(
+      "color-palette-scrolled.png",
+      { maxDiffPixelRatio: 0, threshold: 0 },
+    );
+
+    await workspace.palette.locator('[class*="palette-actions"]').click();
+    await expect(page.getByText("Recent colors")).toBeVisible();
+    await page.mouse.move(640, 300);
+    await expect(page).toHaveScreenshot("color-palette-menu.png", {
+      clip: { x: 300, y: 400, width: 700, height: 320 },
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
+});
+
 test.describe("Viewport", () => {
   test("Shows the workspace correctly for a blank file", async ({ page }) => {
     const workspace = new WorkspacePage(page);
diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs
index 1c95587fc4..8b97d27034 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.cljs
+++ b/frontend/src/app/main/ui/workspace/color_palette.cljs
@@ -18,9 +18,8 @@
    [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
    [app.main.ui.ds.utilities.swatch :refer [swatch*]]
-   [app.main.ui.icons :as deprecated-icon]
    [app.util.color :as uc]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
@@ -186,10 +185,12 @@
                           :on-click on-toggle-search
                           :aria-label (tr "workspace.assets.search")}]])
 
+     ;; Arrows for scrolling the color palette, those buttons no not form part of the DS
      (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 :color-palette-content)
             :ref container
             :on-wheel on-scroll}
@@ -212,7 +213,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 recent-colors-palette*
   {::mf/private true}
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index fb0af2c527..5ac73b02a6 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -4,10 +4,12 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 
 .color-palette {
-  height: 100%;
+  block-size: 100%;
   display: flex;
 }
 
@@ -15,63 +17,60 @@
 .palette-search-collapsed {
   display: flex;
   align-items: center;
-  padding-inline: deprecated.$s-4;
+  padding-inline: var(--sp-xs);
 }
 
 .palette-search {
-  gap: deprecated.$s-4;
-  width: deprecated.$s-192;
-  min-width: deprecated.$s-192;
+  gap: var(--sp-xs);
+  inline-size: $sz-192;
+  min-inline-size: $sz-192;
 }
 
 .palette-search-collapsed {
-  width: deprecated.$s-32;
-  min-width: deprecated.$s-32;
+  inline-size: $sz-32;
+  min-inline-size: $sz-32;
 }
 
+// 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-5;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--arrow-foreground-color);
 
-  svg {
-    @extend %button-icon;
-
-    stroke: var(--icon-foreground);
-  }
+  // Above the color list, which is positioned and comes after the left
+  // arrow, so the fade covers the colors that scroll under it.
+  z-index: 5;
 
   &::after {
     content: "";
     position: absolute;
-    z-index: deprecated.$z-index-1;
-    bottom: 0;
-    left: calc(-1 * deprecated.$s-80);
-    height: 100%;
-    width: deprecated.$s-80;
-    background-image: linear-gradient(
-      to left,
-      var(--palette-button-shadow-initial) 0%,
-      var(--palette-button-shadow-final) 100%
-    );
+    z-index: 1;
+    inset-block-end: 0;
+    inset-inline-start: calc(-1 * px2rem(80));
+    block-size: 100%;
+    inline-size: px2rem(80);
+    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;
@@ -81,19 +80,15 @@
 
 .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);
   }
 }
@@ -108,7 +103,7 @@
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: var(--color-cell-width);
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
 }
 
 .color-cell {
@@ -121,17 +116,18 @@
   grid-template-columns: 100%;
   grid-template-rows: auto 1fr;
   justify-items: center;
-  height: 100%;
+  block-size: 100%;
 
   &.no-text {
-    @include deprecated.flex-center;
-
-    width: deprecated.$s-32;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    inline-size: $sz-32;
   }
 }
 
 .color-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/color_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
index 4a67f0cdb1..5085b9af12 100644
--- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
@@ -12,7 +12,7 @@
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [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.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -75,7 +75,7 @@
              (dm/str "(" (:total-colors library) ")")]]
            (when (= selected id)
              [:span {:class (stl/css :icon-wrapper)}
-              deprecated-icon/tick])]
+              [:> icon* {:icon-id i/tick :size "s"}]])]
           [:div {:class (stl/css :color-sample)
                  :style {:--bullet-size "20px"}}
            (for [color colors]
@@ -100,7 +100,7 @@
 
          (when (= selected :file)
            [:span {:class (stl/css :icon-wrapper)}
-            deprecated-icon/tick])]
+            [:> icon* {:icon-id i/tick :size "s"}]])]
         [:div {:class (stl/css :color-sample)
                :style {:--bullet-size "20px"}}
          (for [color local-colors]
@@ -123,7 +123,7 @@
 
          (when (= selected :recent)
            [:span {:class (stl/css :icon-wrapper)}
-            deprecated-icon/tick])]
+            [:> icon* {:icon-id i/tick :size "s"}]])]
         [:div {:class (stl/css :color-sample)
                :style {:--bullet-size "20px"}}
 
diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
index 48fc511406..bce2b5f6d0 100644
--- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
@@ -4,101 +4,91 @@
 //
 // 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 *;
 
 .palette-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,
   .recent-colors,
   .file-library {
+    --library-name-color: var(--color-foreground-secondary);
+
     position: relative;
     display: flex;
     align-items: flex-start;
-    width: 100%;
-    padding: deprecated.$s-8;
-    border-radius: deprecated.$br-8;
-    margin-bottom: deprecated.$s-4;
+    inline-size: 100%;
+    padding: var(--sp-s);
+    border-radius: $br-8;
+    margin-block-end: var(--sp-xs);
 
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
 
     .option-wrapper {
-      width: 100%;
+      inline-size: 100%;
 
       .library-name {
-        @include deprecated.body-small-typography;
+        @include use-typography("body-small");
 
-        color: var(--context-menu-foreground-color);
+        color: var(--library-name-color);
         display: grid;
-        grid-template-columns: 1fr deprecated.$s-24;
+        grid-template-columns: 1fr $sz-24;
 
         .lib-name-wrapper {
           display: flex;
-          max-width: deprecated.$s-400;
+          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 {
-            @extend %button-icon-small;
-            @include deprecated.flex-center;
-
-            stroke: var(--icon-foreground);
-          }
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-inline-start: var(--sp-xs);
         }
       }
 
       .color-sample {
         display: flex;
         flex-direction: row;
-        gap: deprecated.$s-8;
-        margin-top: deprecated.$s-4;
+        gap: var(--sp-s);
+        margin-block-start: var(--sp-xs);
       }
     }
 
     &.selected,
     &:hover {
-      .option-wrapper .library-name {
-        color: var(--context-menu-foreground-color-selected);
-
-        .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(--color-foreground-primary);
     }
 
     &:hover {
-      background-color: var(--context-menu-background-color-selected);
+      background-color: var(--color-background-quaternary);
     }
   }
 }