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

Use resolved tokens from style-dictionary

Browse source
This commit is contained in:
Florian Schroedl 2024-06-18 11:10:51 +02:00
parent 9261c53aff
commit 5c2891b247
4 changed files with 34 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -34,10 +34,12 @@
[token shapes token-attributes]
(some #(token-applied? token % token-attributes) shapes))
(defn resolve-token-value [{:keys [value] :as token}]
(if-let [int-or-double (d/parse-double value)]
int-or-double
(throw (ex-info (str "Implement token value resolve for " value) token))))
(defn resolve-token-value [{:keys [value resolved-value] :as token}]
(or
resolved-value
(if-let [int-or-double (d/parse-double value)]
int-or-double
(throw (ex-info (str "Implement token value resolve for " value) token)))))
(defn maybe-resolve-token-value [{:keys [value] :as token}]
(when value (resolve-token-value token)))

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

@ -15,7 +15,9 @@
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.tokens.core :as wtc]
[app.main.ui.workspace.tokens.style-dictionary :as sd]
[app.util.dom :as dom]
[cuerdas.core :as str]
[okulary.core :as l]
[rumext.v2 :as mf]
[shadow.resource]))
@ -26,16 +28,21 @@
(mf/defc token-pill
{::mf/wrap-props false}
[{:keys [on-click token highlighted? on-context-menu]}]
(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?
#_#_:token-pill-invalid (not resolved-value))
:title (str (if resolved-value "Token value: " "Invalid token value: ") value)
:on-click on-click
:on-context-menu on-context-menu}
(js/console.log "token" token)
(let [{:keys [name value resolved-value errors]} token
errors? (seq errors)]
[:button {:class (stl/css-case :token-pill true
:token-pill-highlighted highlighted?
:token-pill-invalid errors?)
:title (cond
errors? (sd/humanize-errors token)
:else (->> [(str "Token: " name)
(str "Original value: " value)
(str "Resolved value: " resolved-value)]
(str/join "\n")))
:on-click on-click
:on-context-menu on-context-menu
:disabled errors?}
name]))
(mf/defc token-section-icon
@ -138,7 +145,8 @@
selected (mf/deref refs/selected-shapes)
selected-shapes (into [] (keep (d/getf objects)) selected)
tokens (mf/deref refs/workspace-tokens)
tokens (-> (mf/deref refs/workspace-tokens)
(sd/use-resolved-tokens))
token-groups (mf/with-memo [tokens]
(sorted-token-groups tokens))]
[:article

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

@ -30,6 +30,7 @@
}
&.token-pill-invalid {
background-color: var(--button-secondary-background-color-rest);
color: var(--status-color-error-500);
opacity: 0.8;
}

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

@ -4,6 +4,7 @@
["style-dictionary$default" :as sd]
[app.common.data :as d]
[app.main.refs :as refs]
[cuerdas.core :as str]
[promesa.core :as p]
[rumext.v2 :as mf]
[shadow.resource]))
@ -71,8 +72,13 @@
(js/console.log "Resolved tokens" resolved-tokens))
resolved-tokens))))))
(def errors
{:style-dictionary/missing-reference {:user/message "Could not resolve reference token with the name: %s"}})
(defn humanize-errors [{:keys [errors value] :as _token}]
(->> (map (fn [err]
(case err
:style-dictionary/missing-reference (str "Could not resolve reference token with the name: " value)
nil))
errors)
(str/join "\n")))
(defn tokens-name-map [tokens]
(->> tokens