mirror of
https://github.com/penpot/penpot.git
synced 2026-10-29 14:00:37 +00:00
♻️ Use DS icons in the color palette and its menu (#12444)
* ♻️ 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 * ♻️ 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
This commit is contained in:
Eva Marco
GitHub
parent
14449d9f3d
commit
904f456c61
423
frontend/playwright/data/workspace/get-file-many-colors.json
Normal file
423
frontend/playwright/data/workspace/get-file-many-colors.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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"}}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user