diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 1daceafc9..d534dc78d 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -262,7 +262,7 @@ (def get-active-theme-sets-tokens (l/derived wtts/get-active-theme-sets-tokens-names-map st/state =)) -(def workspace-tokens +(def workspace-selected-token-set-tokens (l/derived (fn [data] (or (wtts/get-selected-token-set-tokens data) {})) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 294185fe6..ef32a4e67 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -856,7 +856,7 @@ shape (when-not multiple (first (deref (refs/objects-by-id ids)))) - tokens (mf/deref refs/workspace-tokens) + tokens (mf/deref refs/workspace-selected-token-set-tokens) spacing-tokens (mf/use-memo (mf/deps tokens) #(:spacing (wtc/group-tokens-by-type tokens))) spacing-column-options (mf/use-memo diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs index 57e6311d1..56c392f3c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -311,7 +311,7 @@ selected (mf/deref refs/selected-shapes) selected-shapes (into [] (keep (d/getf objects)) selected) token-id (:token-id mdata) - token (get (mf/deref refs/workspace-tokens) token-id)] + token (get (mf/deref refs/workspace-selected-token-set-tokens) token-id)] (mf/use-effect (mf/deps mdata) (fn [] diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs index a68d7e046..489d3f041 100644 --- a/frontend/src/app/main/ui/workspace/tokens/core.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs @@ -58,6 +58,6 @@ {:global global})) (defn download-tokens-as-json [] - (let [all-tokens (deref refs/workspace-tokens) + (let [all-tokens (deref refs/workspace-selected-token-set-tokens) transformed-tokens-json (transform-tokens-into-json-format all-tokens)] (export-tokens-file transformed-tokens-json))) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index eb02369ba..39bb1b4bc 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -12,7 +12,6 @@ [app.main.data.tokens :as dt] [app.main.data.tokens :as wdt] [app.main.refs :as refs] - [app.util.storage :refer [storage]] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.icons :as i] @@ -26,6 +25,7 @@ [app.main.ui.workspace.tokens.token :as wtt] [app.main.ui.workspace.tokens.token-types :as wtty] [app.util.dom :as dom] + [app.util.storage :refer [storage]] [cuerdas.core :as str] [okulary.core :as l] [rumext.v2 :as mf] @@ -42,9 +42,9 @@ (mf/defc token-pill {::mf/wrap-props false} - [{:keys [on-click token highlighted? on-context-menu]}] + [{:keys [on-click token theme-token highlighted? on-context-menu] :as props}] (let [{:keys [name value resolved-value errors]} token - errors? (seq errors)] + errors? (and (seq errors) (seq (:errors theme-token)))] [:button {:class (stl/css-case :token-pill true :token-pill-highlighted highlighted? :token-pill-invalid errors?) @@ -78,7 +78,7 @@ i/add)) (mf/defc token-component - [{:keys [type tokens selected-shapes token-type-props]}] + [{:keys [type tokens selected-shapes token-type-props active-theme-tokens]}] (let [open? (mf/deref (-> (l/key type) (l/derived lens:token-type-open-status))) {:keys [modal attributes all-attributes title]} token-type-props @@ -130,12 +130,14 @@ [:& cmm/asset-section-block {:role :content} [:div {:class (stl/css :token-pills-wrapper)} (for [token (sort-by :modified-at tokens)] - [:& token-pill - {:key (:id token) - :token token - :highlighted? (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes)) - :on-click #(on-token-pill-click % token) - :on-context-menu #(on-context-menu % token)}])]])]])) + (let [theme-token (get active-theme-tokens (wtt/token-identifier token))] + [:& token-pill + {:key (:id token) + :token token + :theme-token theme-token + :highlighted? (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes)) + :on-click #(on-token-pill-click % token) + :on-context-menu #(on-context-menu % token)}]))]])]])) (defn sorted-token-groups "Separate token-types into groups of `:empty` or `:filled` depending if tokens exist for that type. @@ -187,11 +189,8 @@ "b { font-weight: 600; }"]) "}")] [:div.spaced-y - {:style {:max-height "60vh" - :overflow "auto" - :border-bottom "2px solid grey" - :padding "10px" - :margin-bottom "50px"}} + {:style {:border-bottom "2px solid grey" + :padding "10px"}} [:& tokene-theme-create] [:div.spaced-y @@ -240,8 +239,7 @@ (dom/prevent-default e) (dom/stop-propagation e) (st/emit! (wdt/delete-token-set id)))} - "🗑️"]]]])] - [:hr]]])) + "🗑️"]]]])]]])) (mf/defc tokens-explorer [_props] @@ -250,6 +248,9 @@ selected (mf/deref refs/selected-shapes) selected-shapes (into [] (keep (d/getf objects)) selected) + + active-theme-tokens (sd/use-active-theme-sets-tokens) + tokens (sd/use-resolved-workspace-tokens) token-groups (mf/with-memo [tokens] (sorted-token-groups tokens))] @@ -261,6 +262,7 @@ [:& token-component {:key token-key :type token-key :selected-shapes selected-shapes + :active-theme-tokens active-theme-tokens :tokens tokens :token-type-props token-type-props}])]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs index 623326140..701a09347 100644 --- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs @@ -99,6 +99,8 @@ (defonce !tokens-cache (atom nil)) +(defonce !theme-tokens-cache (atom nil)) + (defn get-cached-tokens [tokens] (get @!tokens-cache tokens tokens)) @@ -129,5 +131,10 @@ @tokens-state)) (defn use-resolved-workspace-tokens [& {:as config}] - (-> (mf/deref refs/workspace-tokens) + (-> (mf/deref refs/workspace-selected-token-set-tokens) (use-resolved-tokens config))) + +(defn use-active-theme-sets-tokens [& {:as config}] + (-> (mf/deref refs/get-active-theme-sets-tokens) + (use-resolved-tokens {:cache-atom !theme-tokens-cache + :names-map? true})))