Merge remote-tracking branch 'origin/staging' into develop

CHANGES.md

@@ -49,6 +49,7 @@
 - Improve text layer auto-resize: auto-width switches to auto-height on horizontal resize, and only switches to fixed on vertical resize [Taiga #11578](https://tree.taiga.io/project/penpot/issue/11578)
 - Add the ability to show login dialog on profile settings [Github #6871](https://github.com/penpot/penpot/pull/6871)
 - Improve the application of tokens with object specific tokens [Taiga #10209](https://tree.taiga.io/project/penpot/us/10209)
+- Add info to apply-token event [Taiga #11710](https://tree.taiga.io/project/penpot/task/11710)
 
 ### :bug: Bugs fixed
 
@@ -77,6 +78,7 @@
 - Fix tooltip position after first time [Taiga #11688](https://tree.taiga.io/project/penpot/issue/11688)
 - Fix export button width on inspect tab [Taiga #11394](https://tree.taiga.io/project/penpot/issue/11394)
 - Fix stroke width token application [Taiga #11724](https://tree.taiga.io/project/penpot/issue/11724)
+- Fix number token application on shape [Taiga #11331](https://tree.taiga.io/project/penpot/task/11331)
 
 ## 2.8.1
 

frontend/src/app/main/data/event.cljs

@@ -79,14 +79,29 @@
 (defprotocol Event
   (-data [_] "Get event data"))
 
+(defn- coerce-to-string
+  [v]
+  (cond
+    (keyword? v)
+    (name v)
+    (string? v)
+    v
+    (nil? v)
+    nil
+    :else
+    (str v)))
+
+(def ^:private xf:coerce-to-string
+  (keep coerce-to-string))
+
 (defn- simplify-props
   "Removes complex data types from props."
   [data]
   (reduce-kv (fn [data k v]
                (cond
                  (map? v)    (assoc data k :placeholder/map)
-                 (vector? v) (assoc data k :placeholder/vec)
-                 (set? v)    (assoc data k :placeholder/set)
+                 (vector? v) (assoc data k (into [] xf:coerce-to-string v))
+                 (set? v)    (assoc data k (into [] xf:coerce-to-string v))
                  (coll? v)   (assoc data k :placeholder/coll)
                  (fn? v)     (assoc data k :placeholder/fn)
                  (nil? v)    (dissoc data k)

frontend/src/app/main/data/workspace/tokens/application.cljs

@@ -350,9 +350,12 @@
                                       [])
 
                         resolved-value (get-in resolved-tokens [(cft/token-identifier token) :resolved-value])
-                        tokenized-attributes (cft/attributes-map attributes token)]
+                        tokenized-attributes (cft/attributes-map attributes token)
+                        type (:type token)]
                     (rx/of
-                     (st/emit! (ptk/event ::ev/event {::ev/name "apply-tokens"}))
+                     (st/emit! (ev/event {::ev/name "apply-tokens"
+                                          :type type
+                                          :applyed-to attributes}))
                      (dwu/start-undo-transaction undo-id)
                      (dwsh/update-shapes shape-ids (fn [shape]
                                                      (cond-> shape

frontend/src/app/main/ui/releases.cljs

@@ -35,6 +35,7 @@
    [app.main.ui.releases.v2-6]
    [app.main.ui.releases.v2-7]
    [app.main.ui.releases.v2-8]
+   [app.main.ui.releases.v2-9]
    [app.util.object :as obj]
    [app.util.timers :as tm]
    [rumext.v2 :as mf]))
@@ -99,4 +100,4 @@
 
 (defmethod rc/render-release-notes "0.0"
   [params]
-  (rc/render-release-notes (assoc params :version "2.8")))
+  (rc/render-release-notes (assoc params :version "2.9")))

frontend/src/app/main/ui/releases/v2_9.cljs

@@ -0,0 +1,142 @@
+;; 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.releases.v2-9
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.releases.common :as c]
+   [rumext.v2 :as mf]))
+
+(defmethod c/render-release-notes "2.9"
+  [{:keys [slide klass next finish navigate version]}]
+  (mf/html
+   (case slide
+     :start
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.9-slide-0.jpg"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Penpot 2.9 is here!"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "What’s new in Penpot?"]
+
+          [:div {:class (stl/css :version-tag)}
+           (dm/str "Version " version)]]
+
+         [:div {:class (stl/css :features-block)}
+          [:span {:class (stl/css :feature-title)}
+           "Penpot 2.9 is out!"]
+
+          [:p  {:class (stl/css :feature-content)}
+           "We're keeping the momentum going with another exciting round of improvements and features!"]
+
+          [:p  {:class (stl/css :feature-content)}
+           "This release brings major progress in Design Token management (including our very first typography tokens!), smarter text overrides for components, and a rich collection of quality-of-life enhancements."]
+
+          [:p  {:class (stl/css :feature-content)}
+           "Let’s dive in!"]]
+
+         [:div {:class (stl/css :navigation)}
+          [:button {:class (stl/css :next-btn)
+                    :on-click next} "Continue"]]]]]]
+
+     0
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.9-font-size.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "New typography token type"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "New typography token type"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "You can now define and manage font size tokens right from the Design Tokens panel. This is just the first of many typography token types to come. Font weight token is next!"]
+
+          [:p {:class (stl/css :feature-content)}
+           "And there’s more progress on Tokens, including support for importing multiple token files via .zip, and smarter token visibility, only showing the relevant tokens for each layer type."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click next
+                    :class (stl/css :next-btn)} "Continue"]]]]]]
+
+     1
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.9-overrides.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Component text overrides"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "Component text overrides"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "When overriding text inside components, you can now tweak and preserve individual properties like color, effects, font size or font weight."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Now you can confidently apply different tokens to copies of a component, knowing that their intended overrides will remain. This greatly improves consistency, predictability, and control when working with texts in components."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click next
+                    :class (stl/css :next-btn)} "Continue"]]]]]]
+
+     2
+     [:div {:class (stl/css-case :modal-overlay true)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.9-qol.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Quality-of-life galore"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "Quality-of-life galore"]]
+         [:div {:class (stl/css :feature)}
+
+          [:p {:class (stl/css :feature-content)}
+           "This release packs dozens of small yet impactful usability improvements, including enhanced UX writing (thanks to community contributions!), a new visual indicator for comments directly in the design space, a reorganized dashboard sidebar, improved text resizing behavior, and much more."]
+
+          [:p {:class (stl/css :feature-content)}
+           "As always, we've squashed plenty of bugs and made underlying performance improvements to keep everything running smoothly."]]
+
+         [:div {:class (stl/css :navigation)}
+
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click finish
+                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
+

frontend/src/app/main/ui/releases/v2_9.scss

@@ -0,0 +1,102 @@
+// 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
+
+@import "refactor/common-refactor.scss";
+
+.modal-overlay {
+  @extend .modal-overlay-base;
+}
+
+.modal-container {
+  display: grid;
+  grid-template-columns: $s-324 1fr;
+  height: $s-500;
+  width: $s-888;
+  border-radius: $br-8;
+  background-color: var(--modal-background-color);
+  border: $s-2 solid var(--modal-border-color);
+}
+
+.start-image {
+  width: $s-324;
+  border-radius: $br-8 0 0 $br-8;
+}
+
+.modal-content {
+  padding: $s-40;
+  display: grid;
+  grid-template-rows: auto 1fr $s-32;
+  gap: $s-24;
+
+  a {
+    color: var(--button-primary-background-color-rest);
+  }
+}
+
+.modal-header {
+  display: grid;
+  gap: $s-8;
+}
+
+.version-tag {
+  @include flexCenter;
+  @include headlineSmallTypography;
+  height: $s-32;
+  width: $s-96;
+  background-color: var(--communication-tag-background-color);
+  color: var(--communication-tag-foreground-color);
+  border-radius: $br-8;
+}
+
+.modal-title {
+  @include headlineLargeTypography;
+  color: var(--modal-title-foreground-color);
+}
+
+.features-block {
+  display: flex;
+  flex-direction: column;
+  gap: $s-16;
+  width: $s-440;
+}
+
+.feature {
+  display: flex;
+  flex-direction: column;
+  gap: $s-8;
+}
+
+.feature-title {
+  @include bodyLargeTypography;
+  color: var(--modal-title-foreground-color);
+}
+
+.feature-content {
+  @include bodyMediumTypography;
+  margin: 0;
+  color: var(--modal-text-foreground-color);
+}
+
+.feature-list {
+  @include bodyMediumTypography;
+  color: var(--modal-text-foreground-color);
+  list-style: disc;
+  display: grid;
+  gap: $s-8;
+}
+
+.navigation {
+  width: 100%;
+  display: grid;
+  grid-template-areas: "bullets button";
+}
+
+.next-btn {
+  @extend .button-primary;
+  width: $s-100;
+  justify-self: flex-end;
+  grid-area: button;
+}

frontend/src/app/main/ui/workspace/tokens/management/group.cljs

@@ -94,7 +94,7 @@
          (mf/deps selected-shapes not-editing?)
          (fn [event token]
            (dom/stop-propagation event)
-           (when (and not-editing? (seq selected-shapes))
+           (when (and not-editing? (seq selected-shapes) (not= (:type token) :number))
              (st/emit! (dwta/toggle-token {:token token
                                            :shapes selected-shapes})))))]
 

frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs

@@ -126,7 +126,9 @@
 
         base-title (dm/str "Token: " name "\n"
                            (tr "workspace.tokens.original-value" value) "\n"
-                           (tr "workspace.tokens.resolved-value" resolved-value))]
+                           (tr "workspace.tokens.resolved-value" resolved-value)
+                           (when (= (:type token) :number)
+                             (dm/str "\n" (tr "workspace.tokens.more-options"))))]
 
     (cond
       ;; If there are errors, show the appropriate message

frontend/translations/en.po

@@ -7609,6 +7609,10 @@ msgstr "Type '%s' is not supported (%s)\n"
 msgid "workspace.tokens.value-not-valid"
 msgstr "The value is not valid"
 
+#: src/app/main/ui/workspace/tokens/token_pill.cljs
+msgid "workspace.tokens.more-options"
+msgstr "Right click to see options"
+
 #: src/app/main/data/workspace/tokens/errors.cljs:61
 msgid "workspace.tokens.value-with-units"
 msgstr "Invalid value: Units are not allowed."

frontend/translations/es.po

@@ -7502,6 +7502,10 @@ msgstr "El tipo '%s' no está soportado (%s)\n"
 msgid "workspace.tokens.value-not-valid"
 msgstr "El valor no es válido"
 
+#: src/app/main/ui/workspace/tokens/token_pill.cljs
+msgid "workspace.tokens.more-options"
+msgstr "Click derecho para ver opciones"
+
 #: src/app/main/data/workspace/tokens/errors.cljs:61
 msgid "workspace.tokens.value-with-units"
 msgstr "Valor no válido: No se permiten unidades."