From 2b886c54e02054f6d917e1e767f7c1efc34194ec Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 29 Aug 2024 12:52:18 +0200 Subject: [PATCH] Color ramp wip --- .../app/main/ui/workspace/tokens/form.cljs | 19 +++++++++++- .../app/main/ui/workspace/tokens/sidebar.cljs | 30 +++++++++++-------- .../app/main/ui/workspace/tokens/sidebar.scss | 1 + .../app/main/ui/workspace/tokens/token.cljs | 7 +++++ 4 files changed, 44 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs index cc30768a6f..2eb8a02e78 100644 --- a/frontend/src/app/main/ui/workspace/tokens/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs @@ -13,6 +13,8 @@ [app.main.data.tokens :as dt] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.workspace.colorpicker :refer [colorpicker]] + [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]] [app.main.ui.workspace.tokens.common :as tokens.common] [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.token :as wtt] @@ -145,10 +147,20 @@ Token names should only contain letters and digits separated by . characters.")} (defonce form-token-cache-atom (atom nil)) +(mf/defc ramp + [{:keys [color on-change]}] + (let [value (mf/use-state nil)] + (js/console.log "@value" @value) + [:& ramp-selector {:color @value + :on-start-drag js/console.log + :on-finish-drag js/console.log + :on-change #(reset! value (:hex %))}])) + (mf/defc form {::mf/wrap-props false} [{:keys [token token-type]}] (let [token (or token {:type token-type}) + color? (wtt/color-token? token) selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens) active-theme-tokens (mf/deref refs/workspace-active-theme-sets-tokens) resolved-tokens (sd/use-resolved-tokens active-theme-tokens {:names-map? true @@ -201,6 +213,7 @@ Token names should only contain letters and digits separated by . characters.")} (mf/deps on-update-value-debounced) (fn [e] (reset! value-ref (dom/get-target-val e)) + (js/console.log "e" e (dom/get-target-val e)) (on-update-value-debounced e))) value-error? (when (keyword? @token-resolve-result) (= (namespace @token-resolve-result) "error")) @@ -276,10 +289,14 @@ Token names should only contain letters and digits separated by . characters.")} [:p {:key error :class (stl/css :error)} error])] + ;; (when color? + ;; [:& ramp {:color @value-ref + ;; :on-change on-update-value}]) [:& tokens.common/labeled-input {:label "Value" :input-props {:default-value @value-ref :on-blur on-update-value - :on-change on-update-value}}] + :on-change on-update-value + :type (when color? "color")}}] [:div {:class (stl/css-case :resolved-value true :resolved-value-placeholder (nil? @token-resolve-result) :resolved-value-error value-error?)} diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index c333a9a68e..9240d62c38 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -13,6 +13,7 @@ [app.main.data.tokens :as wdt] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.components.color-bullet :refer [color-bullet]] [app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.icons :as i] @@ -57,18 +58,23 @@ [{:keys [on-click token theme-token highlighted? on-context-menu] :as props}] (let [{:keys [name value resolved-value errors]} token errors? (and (seq errors) (seq (:errors theme-token)))] - [: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?} + [: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?} + (js/console.log "resolved-value" resolved-value) + (when (wtt/color-token? token) + [:& color-bullet {:color (wtt/resolved-value-hex token) + :mini? true}]) name])) (mf/defc token-section-icon diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 092a8bc862..ed2f1a9b77 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -72,6 +72,7 @@ .token-pill { @extend .button-secondary; + gap: $s-8; padding: $s-4 $s-8; border-radius: $br-6; font-size: $fs-14; diff --git a/frontend/src/app/main/ui/workspace/tokens/token.cljs b/frontend/src/app/main/ui/workspace/tokens/token.cljs index 32b85ab85c..6ddd84f22a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token.cljs @@ -193,3 +193,10 @@ :else (-> (get path-target selector) (seq) (boolean))))) + +(defn color-token? [token] + (= (:type token) :color)) + +(defn resolved-value-hex [{:keys [resolved-value] :as token}] + (when (and resolved-value (color-token? token)) + (str "#" resolved-value)))