github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-25 19:28:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Xaviju 2025-10-13 14:20:14 +02:00 committed by GitHub
parent da5da00bd4
commit 2548bec651
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,4 +139,4 @@
[:span {:class (stl/css :swatch-solid-side)
:style {:background (uc/color->background (assoc background :opacity 1))}}]
[:span {:class (stl/css :swatch-opacity-side)
:style {:background (uc/color->background background)}}]])]]))
:style {"--solid-color-overlay" (str (uc/color->background background))}}]])]]))

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

@ -8,8 +8,14 @@
@use "ds/_sizes.scss" as *;
@use "ds/colors.scss" as *;
@property --solid-color-overlay {
syntax: "<color>";
inherits: false;
initial-value: rgba(0, 0, 0, 0);
}
.swatch {
--border-color: var(--color-accent-primary-muted);
--border-color: var(--color-background-quaternary);
--border-radius: #{$br-4};
--border-color-active: var(--color-foreground-primary);
--border-color-active-inset: var(--color-background-primary);
@ -73,7 +79,8 @@
background: none;
&:hover {
border: 2px solid var(--border-color);
--border-color: var(--color-accent-primary-muted);
border-width: $b-2;
}
}
@ -98,11 +105,20 @@
}
.swatch-opacity {
background: var(--checkerboard-background);
background-size: var(--checkerboard-size);
display: flex;
}
.swatch-opacity-side {
background-image:
/* solid‑colour overlay */
/* checkerboard pattern */
linear-gradient(var(--solid-color-overlay), var(--solid-color-overlay)), var(--checkerboard-background);
background-size: cover, var(--checkerboard-size);
background-position: center, center;
background-repeat: no-repeat, repeat;
}
.swatch-solid-side,
.swatch-opacity-side {
flex: 1;