@pathscale/ui 1.1.81 → 1.1.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -139,10 +139,11 @@
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
.glass-panel--liquid {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
var(--glass-
|
|
142
|
+
backdrop-filter: blur(var(--glass-panel-blur))
|
|
143
|
+
saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1));
|
|
144
|
+
-webkit-backdrop-filter: blur(var(--glass-panel-blur))
|
|
145
|
+
saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1));
|
|
146
|
+
background-clip: padding-box;
|
|
146
147
|
}
|
|
147
148
|
|
|
148
149
|
.glass-panel--liquid > .glass-panel__header-button,
|
|
@@ -4,137 +4,6 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
|
|
|
4
4
|
import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
|
|
5
5
|
import * as __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__ from "./GlassPanel.classes.js";
|
|
6
6
|
var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button><span></span><svg><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><span class=glass-panel__rim aria-hidden=true></span><span class=glass-panel__depth aria-hidden=true></span><span class=glass-panel__sheen aria-hidden=true></span><div><div>");
|
|
7
|
-
const DEFAULT_GLASS_REFRACTION_DEPTH = 10;
|
|
8
|
-
const DEFAULT_GLASS_REFRACTION_RADIUS_RATIO = 0.08;
|
|
9
|
-
const DEFAULT_GLASS_REFRACTION_STRENGTH = 0.42;
|
|
10
|
-
const DEFAULT_GLASS_CHROMATIC_ABERRATION = 0.018;
|
|
11
|
-
const getDisplacementMap = ({ height, width, radius, depth })=>`data:image/svg+xml;utf8,${encodeURIComponent(`<svg height="${height}" width="${width}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
|
|
12
|
-
<style>
|
|
13
|
-
.mix { mix-blend-mode: screen; }
|
|
14
|
-
</style>
|
|
15
|
-
<defs>
|
|
16
|
-
<linearGradient
|
|
17
|
-
id="Y"
|
|
18
|
-
x1="0"
|
|
19
|
-
x2="0"
|
|
20
|
-
y1="${Math.ceil(radius / height * 15)}%"
|
|
21
|
-
y2="${Math.floor(100 - radius / height * 15)}%">
|
|
22
|
-
<stop offset="0%" stop-color="#0F0" />
|
|
23
|
-
<stop offset="100%" stop-color="#000" />
|
|
24
|
-
</linearGradient>
|
|
25
|
-
<linearGradient
|
|
26
|
-
id="X"
|
|
27
|
-
x1="${Math.ceil(radius / width * 15)}%"
|
|
28
|
-
x2="${Math.floor(100 - radius / width * 15)}%"
|
|
29
|
-
y1="0"
|
|
30
|
-
y2="0">
|
|
31
|
-
<stop offset="0%" stop-color="#F00" />
|
|
32
|
-
<stop offset="100%" stop-color="#000" />
|
|
33
|
-
</linearGradient>
|
|
34
|
-
</defs>
|
|
35
|
-
|
|
36
|
-
<rect x="0" y="0" height="${height}" width="${width}" fill="#808080" />
|
|
37
|
-
<g filter="blur(2px)">
|
|
38
|
-
<rect x="0" y="0" height="${height}" width="${width}" fill="#000080" />
|
|
39
|
-
<rect
|
|
40
|
-
x="0"
|
|
41
|
-
y="0"
|
|
42
|
-
height="${height}"
|
|
43
|
-
width="${width}"
|
|
44
|
-
fill="url(#Y)"
|
|
45
|
-
class="mix"
|
|
46
|
-
/>
|
|
47
|
-
<rect
|
|
48
|
-
x="0"
|
|
49
|
-
y="0"
|
|
50
|
-
height="${height}"
|
|
51
|
-
width="${width}"
|
|
52
|
-
fill="url(#X)"
|
|
53
|
-
class="mix"
|
|
54
|
-
/>
|
|
55
|
-
<rect
|
|
56
|
-
x="${depth}"
|
|
57
|
-
y="${depth}"
|
|
58
|
-
height="${height - 2 * depth}"
|
|
59
|
-
width="${width - 2 * depth}"
|
|
60
|
-
fill="#808080"
|
|
61
|
-
rx="${radius}"
|
|
62
|
-
ry="${radius}"
|
|
63
|
-
filter="blur(${depth}px)"
|
|
64
|
-
/>
|
|
65
|
-
</g>
|
|
66
|
-
</svg>`)}`;
|
|
67
|
-
const getDisplacementFilter = ({ height, width, radius, depth, strength, chromaticAberration })=>`data:image/svg+xml;utf8,${encodeURIComponent(`<svg height="${height}" width="${width}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
|
|
68
|
-
<defs>
|
|
69
|
-
<filter id="displace" color-interpolation-filters="sRGB">
|
|
70
|
-
<feImage x="0" y="0" height="${height}" width="${width}" href="${getDisplacementMap({
|
|
71
|
-
height,
|
|
72
|
-
width,
|
|
73
|
-
radius,
|
|
74
|
-
depth
|
|
75
|
-
})}" result="displacementMap" />
|
|
76
|
-
<feDisplacementMap
|
|
77
|
-
transform-origin="center"
|
|
78
|
-
in="SourceGraphic"
|
|
79
|
-
in2="displacementMap"
|
|
80
|
-
scale="${strength + 2 * chromaticAberration}"
|
|
81
|
-
xChannelSelector="R"
|
|
82
|
-
yChannelSelector="G"
|
|
83
|
-
/>
|
|
84
|
-
<feColorMatrix
|
|
85
|
-
type="matrix"
|
|
86
|
-
values="1 0 0 0 0
|
|
87
|
-
0 0 0 0 0
|
|
88
|
-
0 0 0 0 0
|
|
89
|
-
0 0 0 1 0"
|
|
90
|
-
result="displacedR"
|
|
91
|
-
/>
|
|
92
|
-
<feDisplacementMap
|
|
93
|
-
in="SourceGraphic"
|
|
94
|
-
in2="displacementMap"
|
|
95
|
-
scale="${strength + chromaticAberration}"
|
|
96
|
-
xChannelSelector="R"
|
|
97
|
-
yChannelSelector="G"
|
|
98
|
-
/>
|
|
99
|
-
<feColorMatrix
|
|
100
|
-
type="matrix"
|
|
101
|
-
values="0 0 0 0 0
|
|
102
|
-
0 1 0 0 0
|
|
103
|
-
0 0 0 0 0
|
|
104
|
-
0 0 0 1 0"
|
|
105
|
-
result="displacedG"
|
|
106
|
-
/>
|
|
107
|
-
<feDisplacementMap
|
|
108
|
-
in="SourceGraphic"
|
|
109
|
-
in2="displacementMap"
|
|
110
|
-
scale="${strength}"
|
|
111
|
-
xChannelSelector="R"
|
|
112
|
-
yChannelSelector="G"
|
|
113
|
-
/>
|
|
114
|
-
<feColorMatrix
|
|
115
|
-
type="matrix"
|
|
116
|
-
values="0 0 0 0 0
|
|
117
|
-
0 0 0 0 0
|
|
118
|
-
0 0 1 0 0
|
|
119
|
-
0 0 0 1 0"
|
|
120
|
-
result="displacedB"
|
|
121
|
-
/>
|
|
122
|
-
<feBlend in="displacedR" in2="displacedG" mode="screen"/>
|
|
123
|
-
<feBlend in2="displacedB" mode="screen"/>
|
|
124
|
-
</filter>
|
|
125
|
-
</defs>
|
|
126
|
-
</svg>`)}#displace`;
|
|
127
|
-
const getPx = (value)=>{
|
|
128
|
-
const parsed = Number.parseFloat(value);
|
|
129
|
-
return Number.isFinite(parsed) ? parsed : 0;
|
|
130
|
-
};
|
|
131
|
-
const getCssNumber = (style, name, fallback)=>{
|
|
132
|
-
const parsed = Number.parseFloat(style.getPropertyValue(name));
|
|
133
|
-
return Number.isFinite(parsed) ? parsed : fallback;
|
|
134
|
-
};
|
|
135
|
-
const callEventHandler = (handler, event)=>{
|
|
136
|
-
if ("function" == typeof handler) handler(event);
|
|
137
|
-
};
|
|
138
7
|
const GlassPanel = (props)=>{
|
|
139
8
|
let rootRef;
|
|
140
9
|
const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
@@ -162,8 +31,6 @@ const GlassPanel = (props)=>{
|
|
|
162
31
|
const blur = ()=>local.blur ?? "md";
|
|
163
32
|
const size = ()=>local.size ?? "md";
|
|
164
33
|
const isLiquid = ()=>"liquid" === local.effect;
|
|
165
|
-
const [geometry, setGeometry] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
|
|
166
|
-
const [pressed, setPressed] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
|
|
167
34
|
const isControlled = ()=>void 0 !== local.open;
|
|
168
35
|
const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultOpen ?? true);
|
|
169
36
|
const isOpen = ()=>isControlled() ? true === local.open : internalOpen();
|
|
@@ -173,50 +40,15 @@ const GlassPanel = (props)=>{
|
|
|
173
40
|
if (!isControlled()) setInternalOpen(next);
|
|
174
41
|
local.onToggle?.(next);
|
|
175
42
|
};
|
|
176
|
-
const syncGeometry = ()=>{
|
|
177
|
-
if (!rootRef) return;
|
|
178
|
-
const rect = rootRef.getBoundingClientRect();
|
|
179
|
-
if (rect.width <= 0 || rect.height <= 0) return;
|
|
180
|
-
const style = window.getComputedStyle(rootRef);
|
|
181
|
-
setGeometry({
|
|
182
|
-
width: Math.round(rect.width),
|
|
183
|
-
height: Math.round(rect.height),
|
|
184
|
-
radius: Math.round(getPx(style.borderTopLeftRadius))
|
|
185
|
-
});
|
|
186
|
-
};
|
|
187
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
|
|
188
|
-
syncGeometry();
|
|
189
|
-
if (!rootRef || "undefined" == typeof ResizeObserver) return;
|
|
190
|
-
const observer = new ResizeObserver(syncGeometry);
|
|
191
|
-
observer.observe(rootRef);
|
|
192
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>observer.disconnect());
|
|
193
|
-
});
|
|
194
43
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
|
|
195
44
|
const element = rootRef;
|
|
196
45
|
if (!element) return;
|
|
197
|
-
if (!isLiquid()) {
|
|
46
|
+
if (!isLiquid() || local.transparent) {
|
|
198
47
|
element.style.removeProperty("backdrop-filter");
|
|
199
48
|
element.style.removeProperty("-webkit-backdrop-filter");
|
|
200
49
|
return;
|
|
201
50
|
}
|
|
202
|
-
const
|
|
203
|
-
if (!nextGeometry) return;
|
|
204
|
-
const style = window.getComputedStyle(element);
|
|
205
|
-
const minSide = Math.min(nextGeometry.width, nextGeometry.height);
|
|
206
|
-
const maxDepth = Math.max(1, Math.floor(minSide / 2) - 1);
|
|
207
|
-
const baseDepth = Math.max(1, getCssNumber(style, "--glass-refraction-depth", DEFAULT_GLASS_REFRACTION_DEPTH));
|
|
208
|
-
const depth = Math.min(maxDepth, baseDepth * (pressed() ? 1.35 : 1));
|
|
209
|
-
const radiusRatio = getCssNumber(style, "--glass-refraction-radius-ratio", DEFAULT_GLASS_REFRACTION_RADIUS_RATIO);
|
|
210
|
-
const strengthRatio = getCssNumber(style, "--glass-refraction-strength", DEFAULT_GLASS_REFRACTION_STRENGTH);
|
|
211
|
-
const chromaticRatio = getCssNumber(style, "--glass-refraction-chromatic-aberration", DEFAULT_GLASS_CHROMATIC_ABERRATION);
|
|
212
|
-
const filter = getDisplacementFilter({
|
|
213
|
-
...nextGeometry,
|
|
214
|
-
radius: Math.max(nextGeometry.radius, Math.round(minSide * radiusRatio)),
|
|
215
|
-
depth,
|
|
216
|
-
strength: Math.round(minSide * strengthRatio),
|
|
217
|
-
chromaticAberration: Math.round(minSide * chromaticRatio)
|
|
218
|
-
});
|
|
219
|
-
const backdropFilter = `blur(calc(var(--glass-panel-blur, var(--glass-blur, 16px)) / 2)) url('${filter}') blur(var(--glass-panel-blur, var(--glass-blur, 16px))) brightness(var(--glass-brightness, 1)) saturate(var(--glass-saturation, 1.2))`;
|
|
51
|
+
const backdropFilter = "blur(var(--glass-panel-blur)) saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1))";
|
|
220
52
|
element.style.backdropFilter = backdropFilter;
|
|
221
53
|
element.style.setProperty("-webkit-backdrop-filter", backdropFilter);
|
|
222
54
|
});
|
|
@@ -235,18 +67,6 @@ const GlassPanel = (props)=>{
|
|
|
235
67
|
get ["data-glass-effect"] () {
|
|
236
68
|
return isLiquid() ? "liquid" : void 0;
|
|
237
69
|
},
|
|
238
|
-
onMouseDown: (event)=>{
|
|
239
|
-
callEventHandler(others.onMouseDown, event);
|
|
240
|
-
setPressed(true);
|
|
241
|
-
},
|
|
242
|
-
onMouseUp: (event)=>{
|
|
243
|
-
callEventHandler(others.onMouseUp, event);
|
|
244
|
-
setPressed(false);
|
|
245
|
-
},
|
|
246
|
-
onMouseLeave: (event)=>{
|
|
247
|
-
callEventHandler(others.onMouseLeave, event);
|
|
248
|
-
setPressed(false);
|
|
249
|
-
},
|
|
250
70
|
get style () {
|
|
251
71
|
return local.style;
|
|
252
72
|
}
|
|
@@ -101,23 +101,22 @@
|
|
|
101
101
|
|
|
102
102
|
/* Glass surface tokens */
|
|
103
103
|
--glass-background-color: white;
|
|
104
|
-
--glass-background-opacity:
|
|
104
|
+
--glass-background-opacity: 0.96%;
|
|
105
105
|
--glass-border-color: white;
|
|
106
106
|
--glass-border-opacity: 30%;
|
|
107
107
|
--glass-highlight-color: white;
|
|
108
|
-
--glass-highlight-opacity:
|
|
109
|
-
--glass-bottom-highlight-opacity:
|
|
110
|
-
--glass-edge-highlight-opacity:
|
|
111
|
-
--glass-inner-glow-opacity: 50%;
|
|
108
|
+
--glass-highlight-opacity: 6.4%;
|
|
109
|
+
--glass-bottom-highlight-opacity: 3.2%;
|
|
110
|
+
--glass-edge-highlight-opacity: 8%;
|
|
112
111
|
--glass-inner-glow-rgb: 255 255 255;
|
|
113
|
-
--glass-inner-glow-alpha: 0;
|
|
114
|
-
--glass-inner-glow-blur:
|
|
112
|
+
--glass-inner-glow-alpha: 0.15;
|
|
113
|
+
--glass-inner-glow-blur: 2px;
|
|
115
114
|
--glass-inner-glow-spread: 0px;
|
|
116
115
|
--glass-depth-top-glow-opacity: 8%;
|
|
117
116
|
--glass-depth-bottom-glow-opacity: 12%;
|
|
118
|
-
--glass-depth-sheen-opacity:
|
|
117
|
+
--glass-depth-sheen-opacity: 7.5%;
|
|
119
118
|
--glass-depth-sheen-size: 70%;
|
|
120
|
-
--glass-depth-surface-opacity:
|
|
119
|
+
--glass-depth-surface-opacity: 0%;
|
|
121
120
|
--glass-depth-surface-size: 82%;
|
|
122
121
|
--glass-rim-start-color: var(--color-base-content);
|
|
123
122
|
--glass-rim-start-opacity: 21%;
|
|
@@ -127,14 +126,11 @@
|
|
|
127
126
|
--glass-liquid-edge-size: 3px;
|
|
128
127
|
--glass-liquid-inner-blur: 18px;
|
|
129
128
|
--glass-border-radius: 20px;
|
|
130
|
-
--glass-blur:
|
|
131
|
-
--glass-saturation: 1;
|
|
129
|
+
--glass-blur: 50px;
|
|
130
|
+
--glass-saturation: 1.2;
|
|
132
131
|
--glass-brightness: 1;
|
|
133
132
|
--glass-shadow-depth: 0 8px 32px rgb(0 0 0 / 10%);
|
|
134
133
|
--glass-fallback-background-opacity: 78%;
|
|
135
|
-
--glass-refraction-depth: 5px;
|
|
136
|
-
--glass-refraction-strength: 0.38;
|
|
137
|
-
--glass-refraction-chromatic-aberration: 0.01;
|
|
138
134
|
}
|
|
139
135
|
}
|
|
140
136
|
|
|
@@ -102,23 +102,22 @@
|
|
|
102
102
|
|
|
103
103
|
/* Glass surface tokens */
|
|
104
104
|
--glass-background-color: white;
|
|
105
|
-
--glass-background-opacity:
|
|
105
|
+
--glass-background-opacity: 0.96%;
|
|
106
106
|
--glass-border-color: white;
|
|
107
107
|
--glass-border-opacity: 30%;
|
|
108
108
|
--glass-highlight-color: white;
|
|
109
|
-
--glass-highlight-opacity:
|
|
110
|
-
--glass-bottom-highlight-opacity:
|
|
111
|
-
--glass-edge-highlight-opacity:
|
|
112
|
-
--glass-inner-glow-opacity: 50%;
|
|
109
|
+
--glass-highlight-opacity: 6.4%;
|
|
110
|
+
--glass-bottom-highlight-opacity: 3.2%;
|
|
111
|
+
--glass-edge-highlight-opacity: 8%;
|
|
113
112
|
--glass-inner-glow-rgb: 255 255 255;
|
|
114
|
-
--glass-inner-glow-alpha: 0;
|
|
115
|
-
--glass-inner-glow-blur:
|
|
113
|
+
--glass-inner-glow-alpha: 0.15;
|
|
114
|
+
--glass-inner-glow-blur: 2px;
|
|
116
115
|
--glass-inner-glow-spread: 0px;
|
|
117
116
|
--glass-depth-top-glow-opacity: 8%;
|
|
118
117
|
--glass-depth-bottom-glow-opacity: 12%;
|
|
119
|
-
--glass-depth-sheen-opacity:
|
|
118
|
+
--glass-depth-sheen-opacity: 7.5%;
|
|
120
119
|
--glass-depth-sheen-size: 70%;
|
|
121
|
-
--glass-depth-surface-opacity:
|
|
120
|
+
--glass-depth-surface-opacity: 0%;
|
|
122
121
|
--glass-depth-surface-size: 82%;
|
|
123
122
|
--glass-rim-start-color: var(--color-base-content);
|
|
124
123
|
--glass-rim-start-opacity: 21%;
|
|
@@ -128,14 +127,11 @@
|
|
|
128
127
|
--glass-liquid-edge-size: 3px;
|
|
129
128
|
--glass-liquid-inner-blur: 18px;
|
|
130
129
|
--glass-border-radius: 20px;
|
|
131
|
-
--glass-blur:
|
|
132
|
-
--glass-saturation: 1;
|
|
130
|
+
--glass-blur: 50px;
|
|
131
|
+
--glass-saturation: 1.2;
|
|
133
132
|
--glass-brightness: 1;
|
|
134
133
|
--glass-shadow-depth: 0 8px 32px rgb(0 0 0 / 10%);
|
|
135
134
|
--glass-fallback-background-opacity: 78%;
|
|
136
|
-
--glass-refraction-depth: 5px;
|
|
137
|
-
--glass-refraction-strength: 0.38;
|
|
138
|
-
--glass-refraction-chromatic-aberration: 0.01;
|
|
139
135
|
}
|
|
140
136
|
}
|
|
141
137
|
|