♻️ Remove deprecated @import from scss files (#7347)

* 🐛 Fix import warnings 1 of 2

* 🐛 Fix import warnings 2 of 2

* 🐛 Fix visual tests and format files

* 🐛 Fix mixed declarations on scss

frontend/playwright/ui/render-wasm-specs/texts.spec.js

@@ -227,7 +227,9 @@ test("Renders a file with multiple emoji", async ({ page }) => {
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders a file with multiple text shadows, strokes, and blur combinations", async ({ page }) => {
+test("Renders a file with multiple text shadows, strokes, and blur combinations", async ({
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
 
@@ -243,7 +245,9 @@ test("Renders a file with multiple text shadows, strokes, and blur combinations"
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders a file with different text leaves decoration", async ({ page }) => {
+test("Renders a file with different text leaves decoration", async ({
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile(
@@ -259,7 +263,9 @@ test("Renders a file with different text leaves decoration", async ({ page }) =>
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders a file with different text shadows combinations", async ({ page }) => {
+test("Renders a file with different text shadows combinations", async ({
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile(
@@ -275,8 +281,9 @@ test("Renders a file with different text shadows combinations", async ({ page })
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-
-test("Renders a file with text in frames and different strokes, shadows, and blurs", async ({ page }) => {
+test("Renders a file with text in frames and different strokes, shadows, and blurs", async ({
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile(

frontend/playwright/ui/specs/profile-menu.spec.js

@@ -24,21 +24,20 @@ test("Navigate to penpot changelog from profile menu", async ({ page }) => {
   ]);
 
   await newPage.waitForLoadState();
-  await expect(newPage).toHaveURL("https://github.com/penpot/penpot/blob/develop/CHANGES.md");
+  await expect(newPage).toHaveURL(
+    "https://github.com/penpot/penpot/blob/develop/CHANGES.md",
+  );
 });
 
-test("Opens release notes from current version from profile menu", async ({ page }) => {
+test("Opens release notes from current version from profile menu", async ({
+  page,
+}) => {
   const dashboardPage = new DashboardPage(page);
   await dashboardPage.goToDashboard();
 
   await dashboardPage.openProfileMenu();
   await dashboardPage.clickProfileMenuItem("About Penpot");
-  await expect(
-      page.getByText("Version 0.0.0 notes"),
-    ).toBeVisible();
+  await expect(page.getByText("Version 0.0.0 notes")).toBeVisible();
   await dashboardPage.clickProfileMenuItem("Version");
-  await expect(
-      page.getByText("new in penpot?"),
-    ).toBeVisible();
-
+  await expect(page.getByText("new in penpot?")).toBeVisible();
 });

frontend/playwright/ui/specs/tokens.spec.js

@@ -1000,9 +1000,11 @@ test.describe("Tokens: Themes modal", () => {
       };
 
       // Switch to reference tab and back to composite tab
-      const referenceTabButton = tokensUpdateCreateModal.getByTestId("reference-opt");
+      const referenceTabButton =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
       await referenceTabButton.click();
-      const compositeTabButton = tokensUpdateCreateModal.getByTestId("composite-opt");
+      const compositeTabButton =
+        tokensUpdateCreateModal.getByTestId("composite-opt");
       await compositeTabButton.click();
 
       // Verify all values are preserved after switching tabs
@@ -1052,7 +1054,8 @@ test.describe("Tokens: Themes modal", () => {
       await expect(submitButton).toBeDisabled();
 
       // Switch to reference tab, should not be submittable either
-   const referenceTabButton = tokensUpdateCreateModal.getByTestId("reference-opt");
+      const referenceTabButton =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
       await referenceTabButton.click();
       await expect(submitButton).toBeDisabled();
     });
@@ -1073,7 +1076,8 @@ test.describe("Tokens: Themes modal", () => {
       const nameField = tokensUpdateCreateModal.getByLabel("Name");
       await nameField.fill(newTokenTitle);
 
-         const referenceTabButton = tokensUpdateCreateModal.getByTestId("reference-opt");
+      const referenceTabButton =
+        tokensUpdateCreateModal.getByTestId("reference-opt");
       referenceTabButton.click();
 
       const referenceField = tokensUpdateCreateModal.getByLabel("Reference");

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

@@ -62,7 +62,7 @@ test("User goes to the Viewer Comments", async ({ page }) => {
   await viewerPage.showComments();
   await viewerPage.showCommentsThread(1);
   await expect(
-    viewerPage.page.getByRole("textbox", { name: "Reply" }),
+    viewerPage.page.getByRole("button", { name: "Post" }),
   ).toBeVisible();
 
   await expect(viewerPage.page).toHaveScreenshot();
@@ -101,7 +101,11 @@ test("User goes to the Viewer Inspect code", async ({ page }) => {
 
   await viewerPage.showCode();
 
-  await expect(viewerPage.page.getByText("Size and position")).toBeVisible();
+  await expect(
+    viewerPage.page.getByRole("button", {
+      name: "Toggle panel Size & Position",
+    }),
+  ).toBeVisible();
 
   await expect(viewerPage.page).toHaveScreenshot();
 });
@@ -117,7 +121,11 @@ test("User goes to the Viewer Inspect code, code tab", async ({ page }) => {
   });
 
   await viewerPage.showCode();
-  await viewerPage.page.getByRole("tab", { name: "code" }).click();
+  await viewerPage.page
+    .getByRole("combobox")
+    .filter({ hasText: "Styles" })
+    .click();
+  await viewerPage.page.getByRole("option", { name: "Code" }).click();
 
   await expect(
     viewerPage.page.getByRole("button", { name: "Copy all code" }),

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

@@ -95,9 +95,7 @@ test.describe("Assets tab", () => {
 
     await workspace.clickLibrary("Testing library 1");
     await expect(
-      workspace.librariesModal.getByText(
-        "There are no Shared Libraries available",
-      ),
+      workspace.librariesModal.getByText("File library"),
     ).toBeVisible();
     await expect(workspace.page).toHaveScreenshot();
   });