Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

Highlight invalid token values

Browse source
This commit is contained in:
Florian Schroedl 2024-05-10 10:36:56 +02:00
parent 5813acea02
commit 42b25479b3
2 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -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]))

5
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View file

@ -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;
}
}