CalvinBackup/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-02-13 07:02:58 +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
2 changed files with 23 additions and 12 deletions
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)
format (if id? "rounded" "square")
element-id (mf/use-id)
has-opacity? (and (some? (:color background))
(< (:opacity background) 1))
on-click
(mf/use-fn
(mf/deps background on-click)
@@ -124,18 +126,20 @@
[:> element-type props
(cond
(some? gradient-type)
[:span {:class (stl/css :swatch-gradient)
:style {:background-image (str (uc/gradient->css gradient-data) ", repeating-conic-gradient(lightgray 0% 25%, white 0% 50%)")}}]
[:div {:class (stl/css :swatch-gradient)
:style {:background-image (str (uc/gradient->css gradient-data) ", repeating-conic-gradient(lightgray 0% 25%, white 0% 50%)")}}]
(some? image)
(let [uri (cfg/resolve-file-media image)]
[:span {:class (stl/css :swatch-image)
:style {:background-image (str/ffmt "url(%)" uri)}}])
[:div {:class (stl/css :swatch-image)
:style {:background-image (str/ffmt "url(%)" uri)}}])
has-errors
[:span {:class (stl/css :swatch-error)}]
[:div {:class (stl/css :swatch-error)}]
:else
[:span {:class (stl/css :swatch-opacity)}
[:span {:class (stl/css :swatch-solid-side)
:style {:background (uc/color->background (assoc background :opacity 1))}}]
[:span {:class (stl/css :swatch-opacity-side)
:style {"--solid-color-overlay" (str (uc/color->background background))}}]])]]))
[:div {:class (stl/css :swatch-opacity)}
[:div {:class (stl/css :swatch-solid-side)
:style {:background (uc/color->background (assoc background :opacity 1))}}]
[:div {:class (stl/css-case :swatch-opacity-side true
: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 {
display: flex;
display: grid;
grid-template-columns: auto auto;
}
.swatch-opacity-side {
.swatch-opacity-side-transparency {
background-image:
/* solid‑colour overlay */
/* checkerboard pattern */
@@ -117,6 +118,12 @@
background-size: cover, var(--checkerboard-size);
background-position: center, center;
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,