🐛 Fix color row erros from review (#7516)

* 🐛 Fix text Ellipsis on token color row

* 🐛 Fix show token only on first stroke

* 🐛 Fix detach broken token

common/src/app/common/files/tokens.cljc

@@ -44,7 +44,7 @@
   (let [attr? (set attributes)]
     (->> (remove (fn [[k v]]
                    (and (attr? k)
-                        (= v (token-identifier token))))
+                        (= v (or (token-identifier token) token))))
                  applied-tokens)
          (into {}))))
 

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -83,8 +83,10 @@
 
         on-detach-token
         (mf/use-fn
-         (mf/deps detach-token token)
-         #(detach-token token))
+         (mf/deps detach-token token color-token)
+         (fn []
+           (let [token (or token color-token)]
+             (detach-token token))))
 
         has-errors (some? (:errors token))
         token-name (:name token)

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss

@@ -299,8 +299,12 @@
   @include textEllipsis;
   color: var(--token-color-wrapper-foreground-color);
   block-size: $sz-32;
-  display: flex;
-  align-items: center;
+  line-height: $sz-32;
+}
+
+.token-tooltip {
+  min-width: 0;
+  inline-size: inherit;
 }
 
 .token-name-tooltip {

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs

@@ -192,7 +192,9 @@
                      :on-detach on-color-detach
                      :on-remove on-remove
                      :disable-drag disable-drag
-                     :applied-token stroke-color-token
+                     :applied-token (if (= index 0)
+                                      stroke-color-token
+                                      nil)
                      :on-detach-token on-detach-token-color
                      :on-token-change on-token-change
                      :on-focus on-focus