github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-13 15:38:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix visual glitch in transparent background for swatch component (#7509)

Browse Source
This commit is contained in:
Xaviju 2025-10-16 09:54:33 +02:00 committed by GitHub
parent 392e3ac34e
commit 968274096d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/app/main/ui/ds/utilities/swatch.cljs
View File

@ -93,6 +93,8 @@
image (:image background) image (:image background)
format (if id? "rounded" "square") format (if id? "rounded" "square")
element-id (mf/use-id) element-id (mf/use-id)
has-opacity? (and (some? (:color background))
(< (:opacity background) 1))
on-click on-click
(mf/use-fn (mf/use-fn
(mf/deps background on-click) (mf/deps background on-click)
@ -124,18 +126,20 @@
[:> element-type props [:> element-type props
(cond (cond
(some? gradient-type) (some? gradient-type)
[:span {:class (stl/css :swatch-gradient) [:div {:class (stl/css :swatch-gradient)
:style {:background-image (str (uc/gradient->css gradient-data) ", repeating-conic-gradient(lightgray 0% 25%, white 0% 50%)")}}] :style {:background-image (str (uc/gradient->css gradient-data) ", repeating-conic-gradient(lightgray 0% 25%, white 0% 50%)")}}]
(some? image) (some? image)
(let [uri (cfg/resolve-file-media image)] (let [uri (cfg/resolve-file-media image)]
[:span {:class (stl/css :swatch-image) [:div {:class (stl/css :swatch-image)
:style {:background-image (str/ffmt "url(%)" uri)}}]) :style {:background-image (str/ffmt "url(%)" uri)}}])
has-errors has-errors
[:span {:class (stl/css :swatch-error)}] [:div {:class (stl/css :swatch-error)}]
:else :else
[:span {:class (stl/css :swatch-opacity)} [:div {:class (stl/css :swatch-opacity)}
[:span {:class (stl/css :swatch-solid-side) [:div {:class (stl/css :swatch-solid-side)
:style {:background (uc/color->background (assoc background :opacity 1))}}] :style {:background (uc/color->background (assoc background :opacity 1))}}]
[:span {:class (stl/css :swatch-opacity-side) [:div {:class (stl/css-case :swatch-opacity-side true
:style {"--solid-color-overlay" (str (uc/color->background background))}}]])]])) :swatch-opacity-side-transparency has-opacity?
:swatch-opacity-side-solid-color (not has-opacity?))
:style {"--solid-color-overlay" (str (uc/color->background background))}}]])]]))

11
frontend/src/app/main/ui/ds/utilities/swatch.scss
View File

@ -105,10 +105,11 @@
} }
.swatch-opacity { .swatch-opacity {
display: flex; display: grid;
grid-template-columns: auto auto;
} }
.swatch-opacity-side { .swatch-opacity-side-transparency {
background-image: background-image:
/* solid‑colour overlay */ /* solid‑colour overlay */
/* checkerboard pattern */ /* checkerboard pattern */
@ -117,6 +118,12 @@
background-size: cover, var(--checkerboard-size); background-size: cover, var(--checkerboard-size);
background-position: center, center; background-position: center, center;
background-repeat: no-repeat, repeat; background-repeat: no-repeat, repeat;
clip-path: inset(0 0 0 0 round 0 #{$br-4} #{$br-4} 0);
}
.swatch-opacity-side-solid-color {
background: var(--solid-color-overlay);
background-size: cover;
} }
.swatch-solid-side, .swatch-solid-side,