🐛 Fix highlight on token pill (#9829)

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

@@ -1794,22 +1794,26 @@ test("User duplicate color token", async ({ page }) => {
 test("User disables the current set but token still have resolved values shown in the sidebar", async ({
   page,
 }) => {
-  const { tokenThemesSetsSidebar, tokensSidebar } = await setupEmptyTokensFileRender(page);
+  const { tokenThemesSetsSidebar, tokensSidebar } =
+    await setupEmptyTokensFileRender(page);
 
   // Create color token
   await createToken(page, "Color", "color.primary", "Value", "#ff0000");
   await unfoldTokenType(tokensSidebar, "color");
 
   // Deactivate current set
-  await tokenThemesSetsSidebar
+  await tokenThemesSetsSidebar.getByRole("checkbox").click();
-    .getByRole("checkbox")
-    .click();
 
   // Tokens tab panel should have a token with the color #ff0000 and correct resolved value in the tooltip
-  const colorTokenPill = tokensSidebar.getByRole("button", { name: "#ff0000 color.primary" });
+  const colorTokenPill = tokensSidebar.getByRole("button", {
+    name: "#ff0000 color.primary",
+  });
   await expect(colorTokenPill).toHaveCount(1);
-  await colorTokenPill.hover();  // Force title attribute to be attached to the button
+  await colorTokenPill.hover(); // Force title attribute to be attached to the button
-  await expect(colorTokenPill).toHaveAttribute("title", /Resolved value: #ff0000/);
+  await expect(colorTokenPill).toHaveAttribute(
+    "title",
+    /Resolved value: #ff0000/,
+  );
 });
 
 test.describe("Tokens tab - edition", () => {
@@ -2034,3 +2038,27 @@ test.describe("Tokens tab - delete", () => {
     await expect(colorToken).not.toBeVisible();
   });
 });
+
+test("BUG: 1425 Token is not highlighted in red when value references a token in a disabled set", async ({
+  page,
+}) => {
+  const { tokensSidebar, tokenContextMenuForToken, tokenThemesSetsSidebar } =
+    await setupTokensFileRender(page);
+
+  await expect(tokensSidebar).toBeVisible();
+
+  await unfoldTokenType(tokensSidebar, "Border radius");
+  await createToken(page, "Border radius", "base-radius", "Value", "20");
+  await createToken(page, "Border radius", "ref-base", "Value", "{base-radius}");
+  
+  const refTokenPill = tokensSidebar.getByRole("button", {
+    name: "ref-base",
+  });
+
+  await expect(refTokenPill).toBeVisible();
+
+  const CoreSetCheckbox = tokenThemesSetsSidebar.getByRole('button', { name: 'core' }).getByRole('checkbox'); 
+  await CoreSetCheckbox.click();
+  const brokenTokenPill = tokensSidebar.getByRole('button', { name: 'Missing reference ref-base' });
+  await expect(brokenTokenPill).toBeVisible();
+});

frontend/src/app/main/ui/workspace/sidebar.cljs

@@ -119,7 +119,7 @@
 
 (mf/defc left-sidebar*
   {::mf/memo true}
-  [{:keys [layout file tokens-lib active-tokens resolved-active-tokens]}]
+  [{:keys [layout file tokens-lib active-tokens resolved-active-tokens resolved-active-tokens-not-forced]}]
   (let [options-mode   (mf/deref refs/options-mode-global)
         project        (mf/deref refs/project)
         file-id        (get file :id)
@@ -223,7 +223,8 @@
             [:> tokens-sidebar-tab*
              {:tokens-lib tokens-lib
               :active-tokens active-tokens
-              :resolved-active-tokens resolved-active-tokens}]
+              :resolved-active-tokens resolved-active-tokens
+              :resolved-active-tokens-not-forced resolved-active-tokens-not-forced}]
 
             :layers
             [:> layers-content*
@@ -395,6 +396,8 @@
         resolved-active-tokens-force-set
         (sd/use-resolved-tokens* active-tokens-force-set)]
 
+    ;; TODO: This props should be passed though context to avoid prop drilling.
+
     [:*
      (if (:collapse-left-sidebar layout)
        [:> collapsed-button*]
@@ -403,6 +406,7 @@
                           :page-id page-id
                           :tokens-lib tokens-lib
                           :active-tokens active-tokens-force-set
+                          :resolved-active-tokens-not-forced resolved-active-tokens
                           :resolved-active-tokens (if tokenscript?
                                                     tokenscript-resolved-active-tokens-force-set
                                                     resolved-active-tokens-force-set)}])

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

@@ -85,7 +85,7 @@
 
 (mf/defc tokens-section*
   {::mf/private true}
-  [{:keys [tokens-lib active-tokens resolved-active-tokens]}]
+  [{:keys [tokens-lib active-tokens resolved-active-tokens resolved-active-tokens-not-forced]}]
   (let [objects         (mf/deref refs/workspace-page-objects)
         selected        (mf/deref refs/selected-shapes)
 
@@ -320,6 +320,7 @@
                            :selected-shapes selected-shapes
                            :is-selected-inside-layout is-selected-inside-layout
                            :active-theme-tokens resolved-active-tokens
+                           :active-theme-tokens-not-forced resolved-active-tokens-not-forced
                            :tokens-lib tokens-lib
                            :selected-token-set-id selected-token-set-id}]))
 
@@ -329,4 +330,6 @@
                          :type type
                          :selected-shapes selected-shapes
                          :is-selected-inside-layout is-selected-inside-layout
-                         :active-theme-tokens resolved-active-tokens}])]))
+                         :active-theme-tokens resolved-active-tokens
+                         :active-theme-tokens-not-forced resolved-active-tokens-not-forced
+                         :selected-token-set-id selected-token-set-id}])]))

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

@@ -71,7 +71,7 @@
 
 (mf/defc token-group*
   {::mf/schema schema:token-group}
-  [{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens selected-token-set-id tokens-lib selected-ids]}]
+  [{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens selected-token-set-id tokens-lib selected-ids active-theme-tokens-not-forced]}]
   (let [{:keys [modal title]}
         (get dwta/token-properties type)
 
@@ -190,6 +190,7 @@
                         :selected-shapes selected-shapes
                         :is-selected-inside-layout is-selected-inside-layout
                         :active-theme-tokens active-theme-tokens
+                        :active-theme-tokens-not-forced  active-theme-tokens-not-forced
                         :selected-token-set-id selected-token-set-id
                         :tokens-lib tokens-lib
                         :on-token-pill-click on-token-pill-click

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

@@ -175,7 +175,7 @@
 
 (mf/defc token-pill*
   {::mf/wrap [mf/memo]}
-  [{:keys [on-click token on-context-menu selected-shapes is-selected-inside-layout active-theme-tokens]}]
+  [{:keys [on-click token on-context-menu selected-shapes is-selected-inside-layout active-theme-tokens active-theme-tokens-not-forced]}]
   (let [{:keys [name value type]} token
 
         resolved-token (get active-theme-tokens (:name token))
@@ -216,7 +216,7 @@
         (if (contains? cf/flags :tokenscript)
           (seq (:errors resolved-token))
           (and is-reference?
-               (not (contains-reference-value? value active-theme-tokens))))
+               (not (contains-reference-value? value active-theme-tokens-not-forced))))
 
         no-valid-value (seq errors)
 

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

@@ -134,6 +134,7 @@
            selected-shapes
            is-selected-inside-layout
            active-theme-tokens
+           active-theme-tokens-not-forced
            tokens-lib
            selected-token-set-id
            on-token-pill-click
@@ -171,6 +172,7 @@
              :selected-shapes selected-shapes
              :is-selected-inside-layout is-selected-inside-layout
              :active-theme-tokens active-theme-tokens
+             :active-theme-tokens-not-forced active-theme-tokens-not-forced
              :on-click on-token-pill-click
              :on-context-menu on-pill-context-menu}])
          ;; Render segment folder