diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 1fc420ee2..40c5a4065 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/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)))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index 070f8470e..ba6520e50 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/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;
}
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
index 734098199..c585eedc0 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
+++ b/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
diff --git a/frontend/src/app/main/ui/workspace/tokens/token_pill.scss b/frontend/src/app/main/ui/workspace/tokens/token_pill.scss
index 927b68713..e58271ca5 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token_pill.scss
+++ b/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 {
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index e3296a5e4..ff015d8cd 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -6318,7 +6318,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.
@@ -6357,6 +6356,14 @@ msgstr "Themes"
msgid "workspace.token-set.not-active"
msgstr "Token set is not active"
+#: 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"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index c091f4044..974d0a53b 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -6773,6 +6773,14 @@ 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.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"