Color ramp wip

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?)}

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

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;

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