🎉 Add test for token creation (#7915)

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs

@@ -43,8 +43,8 @@
 ;; 2) Indexed Color Input
 ;;    - Used when the token’s value stores an array of items (e.g. inside
 ;;      shadows, where each shadow layer has its own :color field).
-;;    - The input writes to a nested subfield:
+;;    - The input writes to a nested value-subfield:
-;;         [:value <subfield> <index> :color]
+;;         [:value <value-subfield> <index> :color]
 ;;    - Only that specific color entry is validated.
 ;;    - Other properties (offsets, blur, inset, etc.) remain untouched.
 ;;
@@ -436,19 +436,21 @@
 
                            (some? error)
                            (let [error' (:message error)]
-                             (swap! form assoc-in  [:extra-errors :value value-subfield index input-name] {:message error'})
+                             (do
-                             (swap! form assoc-in [:data :value value-subfield index :color-result] "")
+                               (swap! form assoc-in  [:extra-errors :value value-subfield index input-name] {:message error'})
-                             (reset! hint* {:message error' :type "error"}))
+                               (swap! form assoc-in [:data :value value-subfield index :color-result] "")
+                               (reset! hint* {:message error' :type "error"})))
 
                            :else
                            (let [message (tr "workspace.tokens.resolved-value" (dwtf/format-token-value value))
                                  input-value (get-in @form [:data :value value-subfield index input-name] "")]
-                             (swap! form update :errors dissoc :value)
+                             (do
-                             (swap! form update :extra-errors dissoc :value)
+                               (swap! form update :errors dissoc :value)
-                             (swap! form assoc-in [:data :value value-subfield index :color-result] (dwtf/format-token-value value))
+                               (swap! form update :extra-errors dissoc :value)
-                             (if (= input-value (str value))
+                               (swap! form assoc-in [:data :value value-subfield index :color-result] (dwtf/format-token-value value))
-                               (reset! hint* {})
+                               (if (= input-value (str value))
-                               (reset! hint* {:message message :type "hint"})))))))]
+                                 (reset! hint* {})
+                                 (reset! hint* {:message message :type "hint"}))))))))]
         (fn []
           (rx/dispose! subs))))
 

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/fonts_combobox.cljs

@@ -41,7 +41,7 @@
 ;; 2) Composite Font Picker
 ;;    - Used inside typography tokens, where `:value` is a map (e.g. contains
 ;;      :font-family, :font-weight, :letter-spacing, etc.).
-;;    - The input writes to the specific subfield `[:value :font-family]`.
+;;    - The input writes to the specific value-subfield `[:value :font-family]`.
 ;;    - Only this field is validated and updated—other typography fields remain
 ;;      untouched.
 ;;

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs

@@ -48,7 +48,7 @@
 ;; 2) COMPOSITE INPUTS
 ;;    ----------------------------------------------------------
 ;;    Used when the token contains a set of *named fields* inside :value.
-;;    The UI must write into a specific subfield inside the :value map.
+;;    The UI must write into a specific value-subfield inside the :value map.
 ;;
 ;;    Example: typography tokens
 ;;      {:value {:font-family "Inter"
@@ -64,7 +64,7 @@
 ;;      * Validation rules apply per-field.
 ;;
 ;;    In practice:
-;;      - The component knows which subfield to update.
+;;      - The component knows which value-subfield to update.
 ;;      - The form accumulates multiple fields into a single map under :value.
 ;;
 ;;

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/select.cljs

@@ -13,10 +13,10 @@
 ;; --- Select Input (Indexed) --------------------------------------------------
 ;;
 ;; This input type is part of the indexed system, used for fields that exist
-;; inside an array of maps stored in a subfield of :value.
+;; inside an array of maps stored in a value-subfield of :value.
 ;;
 ;; - Writes to a nested location:
-;;       [:value <subfield> <index> <field>]
+;;       [:value <value-subfield> <index> <field>]
 ;; - Each item in the array has its own select input, independent of others.
 ;; - Validation ensures the selected value is valid for that field.
 ;; - Changing one item does not affect the other items in the array.

frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs

@@ -230,16 +230,29 @@
            {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
 
       [:div {:class (stl/css :input-row)}
-       [:> input-component
+       (case type
-        {:placeholder (or input-value-placeholder (tr "workspace.tokens.token-value-enter"))
+         :indexed
-         :label (tr "workspace.tokens.token-value")
+         [:> input-component
-         :name :value
+          {:token          token
-         :form form
+           :tokens         tokens
-         :token token
+           :tab            active-tab
-         :tokens tokens
+           :value-subfield value-subfield
-         :tab active-tab
+           :handle-toggle  on-toggle-tab}]
-         :subfield value-subfield
+
-         :toggle on-toggle-tab}]]
+         :composite
+         [:> input-component
+          {:token         token
+           :tokens        tokens
+           :tab           active-tab
+           :handle-toggle on-toggle-tab}]
+
+         [:> input-component
+          {:placeholder (or input-value-placeholder
+                            (tr "workspace.tokens.token-value-enter"))
+           :label       (tr "workspace.tokens.token-value")
+           :name        :value
+           :token       token
+           :tokens      tokens}])]
 
       [:div {:class (stl/css :input-row)}
        [:> fc/form-input* {:id "token-description"

frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs

@@ -208,19 +208,20 @@
      :tokens tokens}]])
 
 (mf/defc tabs-wrapper*
-  [{:keys [token tokens form tab toggle subfield] :rest props}]
+  [{:keys [token tokens tab handle-toggle value-subfield] :rest props}]
-  (let [on-add-shadow-block
+  (let [form (mf/use-ctx forms/context)
+        on-add-shadow-block
         (mf/use-fn
-         (mf/deps subfield)
+         (mf/deps value-subfield)
          (fn []
-           (swap! form  update-in [:data :value subfield] conj default-token-shadow)))
+           (swap! form  update-in [:data :value value-subfield] conj default-token-shadow)))
 
         remove-shadow-block
         (mf/use-fn
-         (mf/deps subfield)
+         (mf/deps value-subfield)
          (fn [index event]
            (dom/prevent-default event)
-           (swap! form update-in [:data :value subfield] #(d/remove-at-index % index))))]
+           (swap! form update-in [:data :value value-subfield] #(d/remove-at-index % index))))]
 
     [:*
      [:div {:class (stl/css :title-bar)}
@@ -232,7 +233,7 @@
                         :icon i/add}]
       [:& radio-buttons {:class (stl/css :listing-options)
                          :selected (d/name tab)
-                         :on-change toggle
+                         :on-change handle-toggle
                          :name "reference-composite-tab"}
        [:& radio-button {:icon i/layers
                          :value "composite"
@@ -247,7 +248,7 @@
        [:> composite-form* {:token token
                             :tokens tokens
                             :remove-shadow-block remove-shadow-block
-                            :value-subfield subfield}]
+                            :value-subfield value-subfield}]
 
        [:> reference-form* {:token token
                             :tokens tokens}])]))

frontend/src/app/main/ui/workspace/tokens/management/forms/typography.cljs

@@ -181,13 +181,13 @@
      :tokens tokens}]])
 
 (mf/defc tabs-wrapper*
-  [{:keys [token tokens tab toggle] :rest props}]
+  [{:keys [token tokens tab handle-toggle] :rest props}]
   [:*
    [:div {:class (stl/css :title-bar)}
     [:div {:class (stl/css :title)} (tr "labels.typography")]
     [:& radio-buttons {:class (stl/css :listing-options)
                        :selected (d/name tab)
-                       :on-change toggle
+                       :on-change handle-toggle
                        :name "reference-composite-tab"}
      [:& radio-button {:icon i/layers
                        :value "composite"