Skip to content

Commit 48d6dc1

Browse files
committed
Support for background blur (except fillOpacity) & object blur.
Emit a CSS comment indicating when an image fill is present.
1 parent 4ecc72f commit 48d6dc1

File tree

2 files changed

+37
-4
lines changed

2 files changed

+37
-4
lines changed

main.js

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,9 @@ function copy(selection) {
122122
}
123123

124124
// Fill
125+
var hasBgBlur = (node.blur && node.blur.visible && node.blur.isBackgroundEffect);
125126
var fillName = (node instanceof sg.Text)? "color" : "background";
126-
if (node.fill && node.fillEnabled) {
127+
if (node.fill && node.fillEnabled && !hasBgBlur) {
127128
var fill = node.fill;
128129
if (fill instanceof sg.Color) {
129130
css += `${fillName}: ${colorToCSS(fill)};\n`;
@@ -132,8 +133,9 @@ function copy(selection) {
132133
return colorToCSS(stop.color) + " " + num(stop.stop * 100) + "%";
133134
});
134135
css += `${fillName}: linear-gradient(${ stops.join(", ") });\n`; // TODO: gradient direction!
136+
} else if (fill instanceof sg.ImageFill) {
137+
css += `/* background: url(...); */\n`;
135138
}
136-
// TODO: image fills
137139
} else {
138140
css += `${fillName}: transparent;\n`;
139141
}
@@ -163,6 +165,37 @@ function copy(selection) {
163165
}
164166
}
165167

168+
// Blur
169+
if (node.blur && node.blur.visible) {
170+
var blur = node.blur;
171+
if (blur.isBackgroundEffect) {
172+
// Blur itself
173+
var backdropCSS = `backdrop-filter: blur(${blur.blurAmount}px);\n`;
174+
css += `/* Note: currently only Safari supports backdrop-filter */\n`;
175+
css += backdropCSS;
176+
css += `--webkit-` + backdropCSS;
177+
178+
// Brightness slider
179+
// XD background blur brightness setting is essentially blending black/white with the blurred background: equivalent to translucent
180+
// background-color in CSS. (Can't use 'backdrop-filter: brightness()', which just multiplies each RGB value & also causes hue
181+
// shifts when some channels become saturated).
182+
if (blur.brightnessAmount > 0) {
183+
css += `background-color: rgba(255, 255, 255, ${num(blur.brightnessAmount / 100)});\n`;
184+
} else if (blur.brightnessAmount < 0) {
185+
css += `background-color: rgba(0, 0, 0, ${-num(blur.brightnessAmount / 100)});\n`;
186+
}
187+
188+
// Fill opacity
189+
if (blur.fillOpacity > 0) {
190+
// This blends the shape's fill on top of the blurred background (fill itself is unblurred).
191+
// TODO: support this for solid & gradient fills by baking alpha (& brightnessAmount color) into fill!
192+
css += `/* (plus shape's fill blended on top as a separate layer with ${num(blur.fillOpacity * 100)}% opacity) */\n`;
193+
}
194+
} else {
195+
css += `filter: ${blur.blurAmount}px;\n`;
196+
}
197+
}
198+
166199
clipboard.copyText(css);
167200
// console.log(css);
168201
}

manifest.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"id": "db5e3c23",
33
"name": "Copy CSS to Clipboard",
4-
"version": "1.0.0",
4+
"version": "1.1.0",
55

6-
"description": "Quickly copy CSS code for text styles, colors, gradients, shadows, etc. to the clipboard.\n\nThis plugin is open source and less than 200 lines of code!",
6+
"description": "Quickly copy CSS code for text styles, colors, gradients, shadows, etc. to the clipboard.\n\nThis plugin is open source and only 200 lines of code!",
77
"icons": [
88
{ "width": 96, "height": 96, "path": "[email protected]" }
99
],

0 commit comments

Comments
 (0)