Merge remote-tracking branch 'origin/staging'

CHANGES.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 2.0.3
+
+### :bug: Bugs fixed
+
+- Fix chrome scrollbar styling [Taiga Issue #7852](https://tree.taiga.io/project/penpot/issue/7852)
+
 ## 2.0.2
 
 ### :sparkles: Enhancements
@@ -10,6 +16,7 @@
 ### :bug: Bugs fixed
 
 - Fix color palette sorting [Taiga Issue #7458](https://tree.taiga.io/project/penpot/issue/7458)
+- Fix style scoping problem with imported SVG [Taiga #7671](https://tree.taiga.io/project/penpot/issue/7671)
 
 ## 2.0.1
 

common/src/app/common/colors.cljc

@@ -274,6 +274,13 @@
     (catch #?(:clj Throwable :cljs :default) _cause
       [0 0 0])))
 
+(defn hex->lum
+  [color]
+  (let [[r g b] (hex->rgb color)]
+    (mth/sqrt (+ (* 0.241 r)
+                 (* 0.691 g)
+                 (* 0.068 b)))))
+
 (defn- int->hex
   "Convert integer to hex string"
   [v]
@@ -455,3 +462,19 @@
 
     :else
     [r g (inc b)]))
+
+(defn reduce-range
+  [value range]
+  (/ (mth/floor (* value range)) range))
+
+(defn sort-colors
+  [a b]
+  (let [[ah _ av] (hex->hsv (:color a))
+        [bh _ bv] (hex->hsv (:color b))
+        ah (reduce-range (/ ah 60) 8)
+        bh (reduce-range (/ bh 60) 8)
+        av (/ av 255)
+        bv (/ bv 255)
+        a (+ (* ah 100) (* av 10))
+        b (+ (* bh 100) (* bv 10))]
+    (compare a b)))

frontend/resources/styles/common/base.scss

@@ -28,9 +28,16 @@ body {
 
 * {
   box-sizing: border-box;
+  scrollbar-width: thin;
   // transition: all .4s ease;
 }
 
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: auto;
+  }
+}
+
 .global-zeroclipboard-container {
   transition: none;
 

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -6,10 +6,14 @@
 
 // SCROLLBAR
 .new-scrollbar {
+  scrollbar-width: thin;
   scrollbar-color: rgba(170, 181, 186, 0.3) transparent;
   &:hover {
     scrollbar-color: rgba(170, 181, 186, 0.7) transparent;
   }
+
+  // These rules do not apply in chrome - 121 or higher
+  //  We keep them to preserve backward compatibility.
   ::-webkit-scrollbar {
     background-color: transparent;
     cursor: pointer;

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

@@ -17,6 +17,7 @@
 (def current-page-id      (mf/create-context nil))
 (def current-file-id      (mf/create-context nil))
 (def current-vbox         (mf/create-context nil))
+(def current-svg-root-id  (mf/create-context nil))
 
 (def active-frames        (mf/create-context nil))
 (def render-thumbnails    (mf/create-context nil))

frontend/src/app/main/ui/shapes/group.cljs

@@ -17,6 +17,7 @@
     (mf/fnc group-shape
       {::mf/wrap-props false}
       [props]
+
       (let [shape         (unchecked-get props "shape")
             childs        (unchecked-get props "childs")
             render-id     (mf/use-ctx muc/render-id)
@@ -36,21 +37,31 @@
 
             mask-props    (if ^boolean masked-group?
                             #js {:mask (mask-url render-id mask)}
-                            #js {})]
+                            #js {})
+
+            current-svg-root-id (mf/use-ctx muc/current-svg-root-id)
+
+            ;; We need to create a "scope" for svg classes. The root of the imported SVG (first group) will
+            ;; be stored in the context. When rendering the styles we add its id as prefix.
+            [svg-wrapper svg-wrapper-props]
+            (if (and (contains? shape :svg-attrs) (not  current-svg-root-id))
+              [(mf/provider muc/current-svg-root-id) #js {:value (:id shape)}]
+              [mf/Fragment #js {}])]
 
         ;; We need to separate mask and clip into two because a bug in
         ;; Firefox breaks when the group has clip+mask+foreignObject
         ;; Clip and mask separated will work in every platform Firefox
         ;; bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1734805
-        [:> wrapper clip-props
-         [:> wrapper mask-props
-          (when ^boolean masked-group?
-            [:& render-mask {:mask mask}])
+        [:> svg-wrapper svg-wrapper-props
+         [:> wrapper clip-props
+          [:> wrapper mask-props
+           (when ^boolean masked-group?
+             [:& render-mask {:mask mask}])
 
-          (for [item childs]
-            [:& shape-wrapper
-             {:shape item
-              :key (dm/str (dm/get-prop item :id))}])]]))))
+           (for [item childs]
+             [:& shape-wrapper
+              {:shape item
+               :key (dm/str (dm/get-prop item :id))}])]]]))))
 
 
 

frontend/src/app/main/ui/shapes/svg_raw.cljs

@@ -104,9 +104,20 @@
           svg-root?  (and (map? content) (= tag :svg))
           svg-tag?   (map? content)
           svg-leaf?  (string? content)
-          valid-tag? (contains? csvg/svg-tags tag)]
+          valid-tag? (contains? csvg/svg-tags tag)
+
+          current-svg-root-id (mf/use-ctx muc/current-svg-root-id)
+
+          ;; We need to create a "scope" for svg classes. The root of the imported SVG (first group) will
+          ;; be stored in the context and with this we scoped the styles:
+          style-content
+          (when (= tag :style)
+            (dm/str "#shape-" current-svg-root-id "{ " (->> shape :content :content (str/join "\n")) " }"))]
 
       (cond
+        (= tag :style)
+        [:style style-content]
+
         ^boolean svg-root?
         [:& svg-root {:shape shape}
          (for [item childs]

frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs

@@ -54,13 +54,7 @@
         get-sorted-colors
         (mf/use-fn
          (fn [colors]
-           (sort (fn [a b]
-                   (let [[ah _ al] (c/hex->hsl (:color a))
-                         [bh _ bl] (c/hex->hsl (:color b))
-                         a (+ (* ah 100) (* al 99))
-                         b (+ (* bh 100) (* bl 99))]
-                     (compare a b)))
-                 (into [] (filter check-valid-color?) colors))))
+           (sort c/sort-colors (into [] (filter check-valid-color?) colors))))
 
         toggle-palette
         (mf/use-fn