Merge pull request #5647 from penpot/eva-fix-not-referenced-tokens

🐛  Fix not referenced token pills

frontend/src/app/main/ui/workspace/tokens/common.scss

@@ -19,20 +19,7 @@
 }
 
 .labeled-input-error {
-  border: 1px solid var(--status-color-error-500) !important;
-}
-
-.button {
-  @extend .button-primary;
-}
-
-.action-button {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  svg {
-    @extend .button-icon;
-  }
+  border: $s-1 solid var(--status-color-error-500) !important;
 }
 
 .dropdown {

frontend/src/app/main/ui/workspace/tokens/modals/themes.scss

@@ -175,7 +175,7 @@
 }
 
 .sets-list-wrapper {
-  border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
+  border: $s-1 solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
   border-radius: $s-8;
   overflow-y: auto;
 }

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

@@ -29,10 +29,9 @@
 (mf/defc menu-entry
   {::mf/props :obj}
   [{:keys [title value on-click]}]
-  [:li
-   {:class (stl/css :context-menu-item)
-    :data-value value
-    :on-click on-click}
+  [:li {:class (stl/css :context-menu-item)
+        :data-value value
+        :on-click on-click}
    [:span {:class (stl/css :title)} title]])
 
 (mf/defc menu

frontend/src/app/main/ui/workspace/tokens/sets_context_menu.scss

@@ -4,6 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "../../ds/typography.scss" as t;
 @import "refactor/common-refactor.scss";
 
 .token-set-context-menu {
@@ -21,14 +22,11 @@
   background-color: var(--menu-background-color);
   max-height: 100vh;
   overflow-y: auto;
-
-  li {
-    @include bodySmallTypography;
-    color: var(--menu-foreground-color);
-  }
 }
 
 .context-menu-item {
+  @include t.use-typography("body-small");
+  color: var(--menu-foreground-color);
   display: flex;
   align-items: center;
   height: $s-28;
@@ -39,8 +37,5 @@
 
   &:hover {
     background-color: var(--menu-background-color-hover);
-    .title {
-      color: var(--menu-foreground-color-hover);
-    }
   }
 }

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

@@ -142,6 +142,7 @@
                 :token-type-props token-type-props
                 :token token
                 :selected-shapes selected-shapes
+                :active-theme-tokens active-theme-tokens
                 :theme-token theme-token
                 :half-applied (or (and applied multiple-selection)
                                   (and applied (not full-applied)))

frontend/src/app/main/ui/workspace/tokens/sidebar.scss

@@ -82,8 +82,8 @@
 
 .section-text-icon {
   font-size: $fs-12;
-  width: 16px;
-  height: 16px;
+  width: $s-16;
+  height: $s-16;
   display: flex;
   place-content: center;
 }

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

@@ -9,7 +9,6 @@
    [app.main.ui.components.color-bullet :refer [color-bullet]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]]
-   [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.token :as wtt]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
@@ -97,15 +96,15 @@
 
 (defn token-pill-tooltip
   "Generates a tooltip for a given token."
-  [theme-token is-viewer shape token-type-props token half-applied]
-  (let [{:keys [name value resolved-value errors type]} token
+  [is-viewer shape token-type-props token half-applied no-valid-value ref-not-in-active-set]
+  (let [{:keys [name value resolved-value type]} token
         {:keys [title]} token-type-props
         applied-tokens (:applied-tokens shape)
         app-token-vals (set (vals applied-tokens))
         app-token-keys (keys applied-tokens)
         is-applied? (contains? app-token-vals name)
-        no-token-active (nil? theme-token)
-        errors? (or no-token-active (seq errors))
+
+
         applied-to (if half-applied
                      (partially-applied-attr app-token-keys is-applied? token-type-props)
                      (tr "labels.all"))
@@ -117,9 +116,12 @@
 
     (cond
       ;; If there are errors, show the appropriate message
-      errors? (if no-token-active
-                (tr "workspace.token-set.not-active")
-                (sd/humanize-errors token))
+      ref-not-in-active-set
+      (tr "workspace.token.ref-not-valid")
+
+      no-valid-value
+      (tr "workspace.token.value-not-valid")
+
       ;; If the token is applied and the user is a is-viewer, show the details
       (and is-applied? is-viewer)
       (->> [base-title
@@ -128,17 +130,29 @@
               (translate-and-format grouped-values)
               (str "- " title ": " applied-to))]
            (str/join "\n"))
+
       ;; Otherwise only show the base title
       :else base-title)))
 
+(defn contains-reference-value?
+  "Extracts the value between `{}` in a string and checks if it's in the provided vector."
+  [text values]
+  (let [match (second (re-find #"\{([^}]+)\}" text))]
+    (boolean (some #(= % match) values))))
+
 (mf/defc token-pill
   {::mf/wrap-props false}
-  [{:keys [on-click token theme-token full-applied on-context-menu half-applied selected-shapes token-type-props]}]
+  [{:keys [on-click token theme-token full-applied on-context-menu half-applied selected-shapes token-type-props active-theme-tokens]}]
   (let [{:keys [name value errors]} token
-
+        is-reference (some #(= % "{") value)
         can-edit? (:can-edit (deref refs/permissions))
+
         is-viewer (not can-edit?)
-        errors?   (and (seq errors) (seq (:errors theme-token)))
+        ref-not-in-active-set (and is-reference
+                                   (not (contains-reference-value? value  (keys active-theme-tokens))))
+        no-valid-value (seq errors)
+        errors?   (or ref-not-in-active-set
+                      no-valid-value)
         color     (when (seq (ctob/find-token-value-references value))
                     (wtt/resolved-value-hex theme-token))
         contains-path? (str/includes? name ".")
@@ -182,7 +196,7 @@
          (mf/deps selected-shapes is-viewer)
          (fn [event]
            (let [node (dom/get-current-target event)
-                 title (token-pill-tooltip theme-token is-viewer (first selected-shapes) token-type-props token half-applied)]
+                 title (token-pill-tooltip  is-viewer (first selected-shapes) token-type-props token half-applied no-valid-value ref-not-in-active-set)]
              (dom/set-attribute! node "title" title))))]
 
     [:button {:class (stl/css-case :token-pill true

frontend/src/app/main/ui/workspace/tokens/token_pill.scss

@@ -106,19 +106,21 @@
   --token-pill-outline: none;
   --token-pill-accent: var(--color-foreground-error);
 
-  &:focus-visible {
-    --token-pill-foreground: var(--color-foreground-error);
-  }
-  &:hover {
-    --token-pill-foreground: var(--color-foreground-primary);
-  }
   &:hover,
   &:focus-visible {
     --token-pill-background: var(--color-background-tertiary);
-    --token-pill-outline: var(--color-background-tertiary);
-    --token-pill-border: var(--color-accent-primary);
     --token-pill-accent: var(--color-foreground-error);
   }
+  &:hover {
+    --token-pill-foreground: var(--color-foreground-primary);
+    --token-pill-outline: none;
+    --token-pill-border: var(--color-foreground-error);
+  }
+  &:focus-visible {
+    --token-pill-foreground: var(--color-foreground-error);
+    --token-pill-border: var(--color-accent-primary);
+    --token-pill-outline: var(--color-foreground-error);
+  }
 }
 
 .token-pill-invalid-applied {

frontend/translations/en.po

@@ -6321,7 +6321,6 @@ msgstr "You currently have no themes."
 msgid "workspace.token.num-sets"
 msgstr "%s sets"
 
-
 #: src/app/main/ui/workspace/tokens/form.cljs:55
 msgid "workspace.token.token-name-validation-error"
 msgstr " is not a valid token name.
@@ -6360,6 +6359,18 @@ msgstr "Themes"
 msgid "workspace.token-set.not-active"
 msgstr "Token set is not active"
 
+#: src/app/main/ui/workspace/tokens/token_pill.cljs:47
+msgid "workspace.token.applied-to"
+msgstr "Applied to"
+
+#: src/app/main/ui/workspace/tokens/token_pill.cljs
+msgid "workspace.token.value-not-valid"
+msgstr "The value is not valid"
+
+#: src/app/main/ui/workspace/tokens/token_pill.cljs
+msgid "workspace.token.ref-not-valid"
+msgstr "Reference is not valid or is not in any active set"
+
 #: src/app/main/ui/workspace/sidebar.cljs:117, src/app/main/ui/workspace/sidebar.cljs:126
 msgid "workspace.toolbar.assets"
 msgstr "Assets"

frontend/translations/es.po

@@ -6776,6 +6776,18 @@ msgstr "Temas"
 msgid "workspace.token-set.not-active"
 msgstr "El set de tokens no está aplicado"
 
+#: src/app/main/ui/workspace/tokens/token_pill.cljs
+msgid "workspace.token.applied-to"
+msgstr "Aplicado a"
+
+#: src/app/main/ui/workspace/tokens/token_pill.cljs
+msgid "workspace.token.value-not-valid"
+msgstr "El valor no es válido"
+
+#: src/app/main/ui/workspace/tokens/token_pill.cljs
+msgid "workspace.token.ref-not-valid"
+msgstr "La referencia no es válida o no se encuentra en ningún set activo."
+
 #: src/app/main/ui/workspace/tokens/modals/themes.cljs
 msgid "workspace.token.theme-name"
 msgstr "Tema %s"