✨ Materialize several tokens related flags (#7773)

* 📚 Add line to changelog

* ♻️ Remove typography types flag

* ♻️ Remove composite typography token flag

* ♻️ Remove token units flag

* 🎉 Activate by default two token flags

* ♻️ Update inspect tab tests to navigate to the right info tab

* 🐛 Fix test

---------

Co-authored-by: Xavier Julian <xavier.julian@kaleidos.net>

frontend/playwright/ui/specs/inspect-layout.spec.js

@@ -50,6 +50,7 @@ test("[Taiga #9116] Copy CSS background color in the selected format in the INSP
   });
   await inspectButton.click();
 
+  // Open color space selector combobox and change to RGBA format
   const colorDropdown = workspacePage.page
     .getByRole("combobox")
     .getByText("HEX");
@@ -60,6 +61,17 @@ test("[Taiga #9116] Copy CSS background color in the selected format in the INSP
   });
   await rgbaFormatButton.click();
 
+  // Open info tab selector and select the computed tab
+  const infoTabSelector = workspacePage.page
+    .getByRole("combobox")
+    .getByText("Styles");
+  await infoTabSelector.click();
+
+  const infoTabSelectorButton = workspacePage.page.getByRole("option", {
+    name: "Computed",
+  });
+  await infoTabSelectorButton.click();
+
   const copyColorButton = workspacePage.page.getByRole("button", {
     name: "Copy color",
   });
@@ -118,6 +130,17 @@ test("[Taiga #10630] [INSPECT] Style assets not being displayed on info tab", as
   });
   await inspectButton.click();
 
+  // Open info tab selector and select the computed tab
+  const infoTabSelector = workspacePage.page
+    .getByRole("combobox")
+    .getByText("Styles");
+  await infoTabSelector.click();
+
+  const infoTabSelectorButton = workspacePage.page.getByRole("option", {
+    name: "Computed",
+  });
+  await infoTabSelectorButton.click();
+
   const colorLibraryName = workspacePage.page.getByTestId("color-library-name");
 
   await expect(colorLibraryName).toHaveText("test-color-187cd5");

frontend/playwright/ui/specs/inspect-tab.spec.js

@@ -126,6 +126,12 @@ const openInspectTab = async (workspacePage) => {
   await workspacePage.page.waitForTimeout(500);
 };
 
+/**
+ * @typedef {'hex' | 'rgba' | 'hsla'} ColorSpace
+ *
+ * @param {WorkspacePage} workspacePage - The workspace page instance
+ * @param {ColorSpace} colorSpace - The color space to select
+ */
 const selectColorSpace = async (workspacePage, colorSpace) => {
   const sidebar = workspacePage.page.getByTestId("right-sidebar");
   const colorSpaceSelector = sidebar.getByLabel("Select color space");

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

@@ -94,10 +94,6 @@ const setupTypographyTokensFile = async (page, options = {}) => {
   return setupTokensFile(page, {
     file: "workspace/get-file-typography-tokens.json",
     fileFragment: "workspace/get-file-fragment-typography-tokens.json",
-    flags: [
-      "enable-token-typography-types",
-      "enable-token-typography-composite",
-    ],
     ...options,
   });
 };
@@ -974,42 +970,9 @@ test.describe("Tokens: Themes modal", () => {
 });
 
 test.describe("Tokens: Apply token", () => {
-  // When deleting the "enable-token-color" flag, permanently remove this test.
-  test("User applies color token to a shape without tokens on design-tab", async ({
-    page,
-  }) => {
-    const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
-
-    await page.getByRole("tab", { name: "Layers" }).click();
-
-    await workspacePage.layers
-      .getByTestId("layer-row")
-      .filter({ hasText: "Button" })
-      .click();
-
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
-
-    await tokensSidebar
-      .getByRole("button")
-      .filter({ hasText: "Color" })
-      .click();
-
-    await tokensSidebar
-      .getByRole("button", { name: "colors.black" })
-      .click({ button: "right" });
-    await tokenContextMenuForToken.getByText("Fill").click();
-
-    const inputColor = workspacePage.page.getByRole("textbox", {
-      name: "Color",
-    });
-    await expect(inputColor).toHaveValue("000000");
-  });
-
   test("User applies color token to a shape", async ({ page }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page, { flags: ["enable-token-color"] });
+      await setupTokensFile(page);
 
     await page.getByRole("tab", { name: "Layers" }).click();