✨ 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>

CHANGES.md

@@ -69,6 +69,8 @@ example. It's still usable as before, we just removed the example.
 - Make the file export process more reliable [Taiga #12555](https://tree.taiga.io/project/penpot/us/12555)
 - Add auth flow changes [Taiga #12333](https://tree.taiga.io/project/penpot/us/12333)
 - Add new shape validation mechanism for shapes [Github #7696](https://github.com/penpot/penpot/pull/7696)
+- Apply color tokens from sidebar [Taiga #11353](https://tree.taiga.io/project/penpot/us/11353)
+- Display tokens in the inspect tab [Taiga #9313](https://tree.taiga.io/project/penpot/us/9313)
 
 ### :bug: Bugs fixed
 

common/src/app/common/flags.cljc

@@ -120,11 +120,8 @@
     :terms-and-privacy-checkbox
     ;; Only for developtment.
     :tiered-file-data-storage
-    :token-units
     :token-base-font-size
     :token-color
-    :token-typography-types
-    :token-typography-composite
     :token-shadow
     :transit-readable-response
     :user-feedback
@@ -171,9 +168,8 @@
    :enable-google-fonts-provider
    :enable-component-thumbnails
    :enable-render-wasm-dpr
-   :enable-token-units
+   :enable-token-color
-   :enable-token-typography-types
+   :enable-inspect-styles
-   :enable-token-typography-composite
    :enable-feature-fdata-objects-map])
 
 (defn parse

common/src/app/common/types/token.cljc

@@ -266,10 +266,6 @@
                                 typography-token-keys
                                 #{:line-height}))
 
-;; TODO: Created to extract the font-size feature from the typography feature flag.
-;; Delete this once the typography feature flag is removed.
-(def ff-typography-keys (set/difference typography-keys font-size-keys))
-
 (def ^:private schema:number
   (-> (reduce mu/union [[:map [:line-height {:optional true} token-name-ref]]
                         schema:rotation])

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();
 

frontend/src/app/main/data/workspace/tokens/import_export.cljs

@@ -8,9 +8,8 @@
   (:require
    [app.common.json :as json]
    [app.common.path-names :as cpn]
-   [app.common.types.token :as ctt]
+
    [app.common.types.tokens-lib :as ctob]
-   [app.config :as cf]
    [app.main.data.notifications :as ntf]
    [app.main.data.style-dictionary :as sd]
    [app.main.data.workspace.tokens.errors :as wte]
@@ -62,17 +61,7 @@
   [decoded-json file-name]
   (try
     {:tokens-lib (ctob/parse-decoded-json decoded-json file-name)
-     :unknown-tokens (ctob/get-tokens-of-unknown-type decoded-json
+     :unknown-tokens (ctob/get-tokens-of-unknown-type decoded-json {})}
-                                                      ;; Filter out FF token-types
-                                                      {:process-token-type
-                                                       (fn [dtcg-token-type]
-                                                         (if (or
-                                                              (and (not (contains? cf/flags :token-units))
-                                                                   (= dtcg-token-type "number"))
-                                                              (and (not (contains? cf/flags :token-typography-types))
-                                                                   (contains? ctt/ff-typography-keys dtcg-token-type)))
-                                                           nil
-                                                           dtcg-token-type))})}
     (catch js/Error e
       (let [err (or (extract-name-error e)
                     (wte/error-ex-info :error.import/invalid-json-data decoded-json e))]

frontend/src/app/main/ui/workspace/tokens/management.cljs

@@ -3,7 +3,6 @@
   (:require
    [app.common.data :as d]
    [app.common.types.shape.layout :as ctsl]
-   [app.common.types.token :as ctt]
    [app.common.types.tokens-lib :as ctob]
    [app.config :as cf]
    [app.main.data.style-dictionary :as sd]
@@ -23,23 +22,13 @@
 (def ref:token-type-open-status
   (l/derived (l/key :open-status-by-type) refs/workspace-tokens))
 
-(defn- remove-keys [m ks]
-  (d/removem (comp ks key) m))
-
 (defn- get-sorted-token-groups
   "Separate token-types into groups of `empty` or `filled` depending if
-  tokens exist for that type. Sort each group alphabetically (by their type).
+  tokens exist for that type. Sort each group alphabetically (by their type)."
-  If `:token-units` is not in cf/flags, number tokens are excluded."
   [tokens-by-type]
-  (let [token-units? (contains? cf/flags :token-units)
+  (let [token-shadow? (contains? cf/flags :token-shadow)
-        token-typography-composite-types? (contains? cf/flags :token-typography-composite)
-        token-typography-types? (contains? cf/flags :token-typography-types)
-        token-shadow? (contains? cf/flags :token-shadow)
         all-types (cond-> dwta/token-properties
-                    (not token-shadow?) (dissoc :shadow)
+                    (not token-shadow?) (dissoc :shadow))
-                    (not token-units?) (dissoc :number)
-                    (not token-typography-composite-types?) (remove-keys ctt/typography-token-keys)
-                    (not token-typography-types?) (remove-keys ctt/ff-typography-keys))
         all-types (-> all-types keys seq)]
     (loop [empty  #js []
            filled #js []