diff --git a/CHANGES.md b/CHANGES.md index b1de66ba47..929385dda7 100644 --- a/CHANGES.md +++ b/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 diff --git a/common/src/app/common/flags.cljc b/common/src/app/common/flags.cljc index 3c5311f7af..60a3b09d48 100644 --- a/common/src/app/common/flags.cljc +++ b/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-typography-types - :enable-token-typography-composite + :enable-token-color + :enable-inspect-styles :enable-feature-fdata-objects-map]) (defn parse diff --git a/common/src/app/common/types/token.cljc b/common/src/app/common/types/token.cljc index cacfc5ea48..6fe15169e0 100644 --- a/common/src/app/common/types/token.cljc +++ b/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]) diff --git a/frontend/playwright/ui/specs/inspect-layout.spec.js b/frontend/playwright/ui/specs/inspect-layout.spec.js index 176992ca30..0190b76ed2 100644 --- a/frontend/playwright/ui/specs/inspect-layout.spec.js +++ b/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"); diff --git a/frontend/playwright/ui/specs/inspect-tab.spec.js b/frontend/playwright/ui/specs/inspect-tab.spec.js index 29739b9237..ce96c27f42 100644 --- a/frontend/playwright/ui/specs/inspect-tab.spec.js +++ b/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"); diff --git a/frontend/playwright/ui/specs/tokens.spec.js b/frontend/playwright/ui/specs/tokens.spec.js index f19600670b..440190f26a 100644 --- a/frontend/playwright/ui/specs/tokens.spec.js +++ b/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(); diff --git a/frontend/src/app/main/data/workspace/tokens/import_export.cljs b/frontend/src/app/main/data/workspace/tokens/import_export.cljs index 88ae05e5e1..e7f872243d 100644 --- a/frontend/src/app/main/data/workspace/tokens/import_export.cljs +++ b/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 - ;; 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))})} + :unknown-tokens (ctob/get-tokens-of-unknown-type decoded-json {})} (catch js/Error e (let [err (or (extract-name-error e) (wte/error-ex-info :error.import/invalid-json-data decoded-json e))] diff --git a/frontend/src/app/main/ui/workspace/tokens/management.cljs b/frontend/src/app/main/ui/workspace/tokens/management.cljs index 91a6bc768b..98bbb080b5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management.cljs +++ b/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). - If `:token-units` is not in cf/flags, number tokens are excluded." + tokens exist for that type. Sort each group alphabetically (by their type)." [tokens-by-type] - (let [token-units? (contains? cf/flags :token-units) - 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) + (let [token-shadow? (contains? cf/flags :token-shadow) all-types (cond-> dwta/token-properties - (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)) + (not token-shadow?) (dissoc :shadow)) all-types (-> all-types keys seq)] (loop [empty #js [] filled #js []