✨ Refactor create token modal

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -51,7 +51,7 @@
 (mf/defc color-bullet
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
-  [{:keys [color on-click mini? area]}]
+  [{:keys [color on-click mini area]}]
   (let [read-only? (nil? on-click)
         on-click
         (mf/use-fn
@@ -73,7 +73,7 @@
         [:div
          {:class (stl/css-case
                   :color-bullet true
-                  :mini mini?
+                  :mini mini
                   :is-library-color (some? id)
                   :is-not-library-color (nil? id)
                   :is-gradient (some? gradient)

frontend/src/app/main/ui/ds/_borders.scss

@@ -8,6 +8,7 @@
 
 // TODO: create actual tokens once we have them from design
 $br-8: px2rem(8);
+$br-4: px2rem(4);
 $br-circle: 50%;
 
 $b-1: px2rem(1);

frontend/src/app/main/ui/ds/controls/input.cljs

@@ -23,9 +23,10 @@
 
 (mf/defc input*
   {::mf/props :obj
+   ::mf/forward-ref true
    ::mf/schema schema:input}
-  [{:keys [icon class type ref] :rest props}]
+  [{:keys [icon class type external-ref] :rest props}]
-  (let [ref (or ref (mf/use-ref))
+  (let [ref (or external-ref (mf/use-ref))
         type (or type "text")
         icon-class (stl/css-case :input true
                                  :input-with-icon (some? icon))

frontend/src/app/main/ui/ds/controls/input.scss

@@ -18,6 +18,7 @@
   column-gap: var(--sp-xs);
   align-items: center;
   position: relative;
+  inline-size: 100%;
 
   background: var(--input-bg-color);
   border-radius: $br-8;
@@ -48,6 +49,7 @@
   height: $sz-32;
   border: none;
   background: none;
+  inline-size: 100%;
 
   @include use-typography("body-small");
   color: var(--input-fg-color);

frontend/src/app/main/ui/workspace/colorpicker/ramp.scss

@@ -10,7 +10,7 @@
   background-color: rgba(var(--hue-rgb));
   position: relative;
   height: $s-140;
-  width: $s-256;
+  width: 100%;
   margin-top: $s-12;
   margin-bottom: $s-12;
   cursor: pointer;

frontend/src/app/main/ui/workspace/tokens/common.scss

@@ -6,22 +6,6 @@
 
 @import "refactor/common-refactor.scss";
 
-.input {
-  @extend .input-element;
-}
-
-.labeled-input {
-  @extend .input-element;
-  .label {
-    width: auto;
-    text-wrap: nowrap;
-  }
-}
-
-.labeled-input-error {
-  border: 1px solid var(--status-color-error-500) !important;
-}
-
 .button {
   @extend .button-primary;
 }

frontend/src/app/main/ui/workspace/tokens/components/controls/input_token_color_bullet.cljs

@@ -0,0 +1,27 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.workspace.tokens.components.controls.input-token-color-bullet
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.ui.components.color-bullet :refer [color-bullet]]
+   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
+   [rumext.v2 :as mf]))
+
+(def ^:private schema::input-token-color-bullet
+  [:map
+   [:color [:maybe :string]]
+   [:on-click fn?]])
+
+(mf/defc input-token-color-bullet*
+  {::mf/props :obj
+   ::mf/schema schema::input-token-color-bullet}
+  [{:keys [color on-click]}]
+  [:div {:class (stl/css :input-token-color-bullet)
+         :on-click on-click}
+   (if-let [hex (some-> color tinycolor/valid-color tinycolor/->hex)]
+     [:> color-bullet {:color hex :mini true}]
+     [:div {:class (stl/css :input-token-color-bullet-placeholder)}])])

frontend/src/app/main/ui/workspace/tokens/components/controls/input_token_color_bullet.scss

@@ -0,0 +1,28 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "../../../../ds/_sizes.scss" as *;
+@use "../../../../ds/_borders.scss" as *;
+
+.input-token-color-bullet {
+  --bullet-size: var(--sp-l);
+  --bullet-default-color: var(--color-foreground-secondary);
+  --bullet-radius: var(--br-4);
+
+  margin-inline-end: var(--sp-s);
+  cursor: pointer;
+}
+
+.input-token-color-bullet-placeholder {
+  width: var(--bullet-size, --sp-l);
+  height: var(--bullet-size, --sp-l);
+  min-width: var(--bullet-size, --sp-l);
+  min-height: var(--bullet-size, --sp-l);
+  margin-top: 0;
+  background-color: color-mix(in hsl, var(--bullet-default-color) 30%, transparent);
+  border-radius: $br-4;
+  cursor: pointer;
+}

frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs

@@ -0,0 +1,43 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.workspace.tokens.components.controls.input-tokens
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.ds.controls.input :refer [input*]]
+   [rumext.v2 :as mf]))
+
+(def ^:private schema::input-tokens
+  [:map
+   [:id :string]
+   [:label :string]
+   [:placeholder {:optional true} :string]
+   [:default-value {:optional true} [:maybe :string]]
+   [:class {:optional true} :string]
+   [:error {:optional true} :boolean]
+   [:value {:optional true} :string]])
+
+(mf/defc input-tokens*
+  {::mf/props :obj
+   ::mf/forward-ref true
+   ::mf/schema schema::input-tokens}
+  [{:keys [class label external-ref id error value children] :rest props}]
+  (let [ref (or external-ref (mf/use-ref))
+        props (mf/spread-props props {:id id
+                                      :type "text"
+                                      :class (stl/css :input)
+                                      :aria-invalid error
+                                      :value value
+                                      :external-ref ref})]
+    [:div {:class (dm/str class " "
+                          (stl/css-case :wrapper true
+                                        :input-error error))}
+     [:label {:for id :class (stl/css :label)} label]
+     [:div {:class (stl/css :input-wrapper)}
+      (when children
+        [:div {:class (stl/css :input-swatch)} children])
+      [:> input* props]]]))

frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.scss

@@ -0,0 +1,53 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "../../../../ds/typography.scss" as *;
+@use "../../../../ds/_borders.scss" as *;
+@use "../../../../ds/_sizes.scss" as *;
+
+@import "refactor/common-refactor.scss";
+
+.wrapper {
+  --label-color: var(--color-foreground-primary);
+  --input-bg-color: var(--color-background-tertiary);
+  --input-fg-color: var(--color-foreground-primary);
+  --input-icon-color: var(--color-foreground-secondary);
+  --input-outline-color: none;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
+
+  &.input-error {
+    --input-outline-color: var(--color-accent-error);
+  }
+}
+
+.label {
+  @include use-typography("body-small");
+  @include textEllipsis;
+  color: var(--label-color);
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+
+  &:has(.input-swatch) {
+    position: relative;
+
+    & .input {
+      padding-inline-start: var(--sp-xxxl);
+    }
+  }
+}
+
+.input-swatch {
+  position: absolute;
+  display: flex;
+  inset-inline-start: var(--sp-s);
+  z-index: 2;
+}

frontend/src/app/main/ui/workspace/tokens/form.cljs

@@ -15,18 +15,19 @@
    [app.main.data.tokens :as dt]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet :refer [color-bullet]]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
    [app.main.ui.workspace.colorpicker :as colorpicker]
    [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
-   [app.main.ui.workspace.tokens.common :as tokens.common]
+   [app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
+   [app.main.ui.workspace.tokens.components.controls.input-tokens :refer [input-tokens*]]
    [app.main.ui.workspace.tokens.errors :as wte]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
    [app.main.ui.workspace.tokens.token :as wtt]
+   [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.main.ui.workspace.tokens.update :as wtu]
    [app.util.dom :as dom]
    [app.util.functions :as uf]
@@ -205,6 +206,7 @@ Token names should only contain letters and digits separated by . characters.")}
   {::mf/wrap-props false}
   [{:keys [token token-type action selected-token-set-id]}]
   (let [token (or token {:type token-type})
+        token-properties (wtty/get-token-properties token)
         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)
@@ -362,14 +364,17 @@ Token names should only contain letters and digits separated by . characters.")}
          (tr "workspace.token.create-token" token-type))]
 
       [:div {:class (stl/css :input-row)}
-       ;; This should be remove when labeled-imput is modified
+       (let [token-title (str/lower (:title token-properties))]
-       [:span {:class (stl/css :labeled-input-label)} "Name"]
+         [:> input-tokens*
-       [:& tokens.common/labeled-input {:label "Name"
+          {:id "token-name"
-                                        :error? @name-errors
+           :placeholder (tr "workspace.token.enter-token-name", token-title)
-                                        :input-props {:default-value @name-ref
+           :error (boolean @name-errors)
            :auto-focus true
+           :label (tr "workspace.token.token-name")
+           :default-value @name-ref
            :on-blur on-update-name
-                                                      :on-change on-update-name}}]
+           :on-change on-update-name}])
+
        (for [error (->> (:errors @name-errors)
                         (map #(-> (assoc @name-errors :errors [%])
                                   (me/humanize))))]
@@ -380,34 +385,31 @@ Token names should only contain letters and digits separated by . characters.")}
           error])]
 
       [:div {:class (stl/css :input-row)}
-       ;; This should be remove when labeled-imput is modified
+       [:> input-tokens*
-       [:span {:class (stl/css :labeled-input-label)}  "Value"]
+        {:id "token-value"
-       [:& tokens.common/labeled-input {:label "Value"
+         :placeholder (tr "workspace.token.enter-token-value")
-                                        :input-props {:default-value @value-ref
+         :label (tr "workspace.token.token-value")
-                                                      :on-blur on-update-value
+         :default-value @value-ref
+         :external-ref value-input-ref
          :on-change on-update-value
-                                                      :ref value-input-ref}
+         :on-blur on-update-value}
-                                        :render-right (when color?
+        (when color?
-                                                        (mf/fnc drop-down-button []
+          [:> input-token-color-bullet*
-                                                          [:div {:class (stl/css :color-bullet)
+           {:color @color :on-click #(swap! color-ramp-open? not)}])]
-                                                                 :on-click #(swap! color-ramp-open? not)}
-                                                           (if-let [hex (some-> @color tinycolor/valid-color tinycolor/->hex)]
-                                                             [:& color-bullet {:color hex
-                                                                               :mini? true}]
-                                                             [:div {:class (stl/css :color-bullet-placeholder)}])]))}]
        (when @color-ramp-open?
          [:& ramp {:color (some-> (or @token-resolve-result (:value token))
                                   (tinycolor/valid-color))
                    :on-change on-update-color}])
        [:& token-value-or-errors {:result-or-errors @token-resolve-result}]]
 
-
       [:div {:class (stl/css :input-row)}
-       ;; This should be remove when labeled-imput is modified
+       [:> input-tokens*
-       [:span {:class (stl/css :labeled-input-label)}  "Description"]
+        {:id "token-description"
-       [:& tokens.common/labeled-input {:label "Description"
+         :placeholder (tr "workspace.token.enter-token-description")
-                                        :input-props {:default-value @description-ref
+         :label (tr "workspace.token.token-description")
-                                                      :on-change on-update-description}}]
+         :default-value @description-ref
+         :on-blur on-update-description
+         :on-change on-update-description}]
        (when @description-errors
          [:> text* {:as "p"
                     :typography "body-small"

frontend/src/app/main/ui/workspace/tokens/form.scss

@@ -65,22 +65,6 @@
   --input-hint-color: var(--status-color-error-500);
 }
 
-.color-bullet {
-  margin-right: $s-8;
-  cursor: pointer;
-}
-
-.color-bullet-placeholder {
-  width: var(--bullet-size, $s-16);
-  height: var(--bullet-size, $s-16);
-  min-width: var(--bullet-size, $s-16);
-  min-height: var(--bullet-size, $s-16);
-  margin-top: 0;
-  background-color: color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
-  border-radius: $br-4;
-  cursor: pointer;
-}
-
 .form-modal-title {
   color: var(--color-foreground-primary);
 }

frontend/translations/en.po

@@ -6387,6 +6387,30 @@ msgstr "Edit token"
 msgid "workspace.token.resolved-value"
 msgstr "Resolved value: "
 
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-name"
+msgstr "Name"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-name"
+msgstr "Enter %s token name" 
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-value"
+msgstr "Value"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-value"
+msgstr "Enter token value or alias"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-description"
+msgstr "Description"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-description"
+msgstr "Add a description (optional)"
+
 #: src/app/main/ui/workspace/tokens/sidebar.cljs
 msgid "workspace.token.original-value"
 msgstr "Original value: "

frontend/translations/es.po

@@ -6369,6 +6369,30 @@ msgstr "Editar token"
 msgid "workspace.token.resolved-value"
 msgstr "Valor resuelto: "
 
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-name"
+msgstr "Nombre"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-name"
+msgstr "Introduce un nombre para el token %s" 
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-value"
+msgstr "Valor"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-value"
+msgstr "Introduce un valor o alias"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-description"
+msgstr "Descripción"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-description"
+msgstr "Añade una Descripción (opcional)"
+
 #: src/app/main/ui/workspace/tokens/sidebar.cljs
 msgid "workspace.token.original-value"
 msgstr "Valor original: "