diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index ce44eeec9..3926ed056 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -20,10 +20,14 @@ (mf/defc token-pill {::mf/wrap-props false} [{:keys [on-click token highlighted?]}] - (let [{:keys [name value]} token] + (let [{:keys [name value]} token + resolved-value (try + (wtc/resolve-token-value token) + (catch js/Error _ nil))] [:div {:class (stl/css-case :token-pill true - :token-pill-highlighted highlighted?) - :title (str "Token value: " value) + :token-pill-highlighted highlighted? + :token-pill-invalid (not resolved-value)) + :title (str (if resolved-value "Token value: " "Invalid token value: ") value) :on-click on-click} name])) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 75cd515bc..3a0284050 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -27,4 +27,9 @@ color: var(--button-primary-foreground-color-rest); background: var(--button-primary-background-color-rest); } + + &.token-pill-invalid { + color: var(--status-color-error-500); + opacity: 0.8; + } }