johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki 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
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/defc token-pill
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [on-click token highlighted?]}] [{: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 [:div {:class (stl/css-case :token-pill true
:token-pill-highlighted highlighted?) :token-pill-highlighted highlighted?
:title (str "Token value: " value) :token-pill-invalid (not resolved-value))
:title (str (if resolved-value "Token value: " "Invalid token value: ") value)
:on-click on-click} :on-click on-click}
name])) name]))

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

@@ -27,4 +27,9 @@
color: var(--button-primary-foreground-color-rest); color: var(--button-primary-foreground-color-rest);
background: var(--button-primary-background-color-rest); background: var(--button-primary-background-color-rest);
} }
&.token-pill-invalid {
color: var(--status-color-error-500);
opacity: 0.8;
}
} }