@pathscale/ui 1.1.74 → 1.1.75

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.
Files changed (3) hide show
  1. package/dist/components/glass-panel/GlassPanel.css +12 -61
  2. package/dist/components/glass-panel/GlassPanel.js +15 -36
  3. package/package.json +1 -1
package/dist/components/glass-panel/GlassPanel.css CHANGED
@@ -20,22 +20,14 @@
20
20
 
21
21
  .glass-panel--liquid {
22
22
  overflow: hidden;
23
- background: linear-gradient(
24
- 135deg,
25
- color-mix(in srgb, white 18%, transparent),
26
- transparent 38%,
27
- color-mix(in srgb, white 10%, transparent) 72%,
28
- transparent
29
- ), color-mix(in srgb, var(--color-base-100) 12%, transparent);
30
- border-color: color-mix(in srgb, var(--color-base-content) 12%, transparent);
31
- box-shadow: inset 0 1px 0 color-mix(in srgb, white 38%, transparent), inset
32
- 0 -1px 0 color-mix(in srgb, var(--color-base-content) 5%, transparent);
33
- backdrop-filter: var(--glass-panel-liquid-filter) blur(10px) saturate(1.12);
34
- -webkit-backdrop-filter: var(--glass-panel-liquid-filter) blur(10px)
35
- saturate(1.12);
36
- }
37
-
38
- .glass-panel--liquid::before,
23
+ background: color-mix(in srgb, var(--color-base-100) 4%, transparent);
24
+ border-color: color-mix(in srgb, var(--color-base-content) 9%, transparent);
25
+ box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), inset
26
+ 0 -1px 0 color-mix(in srgb, black 7%, transparent);
27
+ backdrop-filter: blur(6px) saturate(1.12);
28
+ -webkit-backdrop-filter: blur(6px) saturate(1.12);
29
+ }
30
+
39
31
  .glass-panel--liquid::after {
40
32
  position: absolute;
41
33
  inset: 0;
@@ -44,63 +36,22 @@
44
36
  content: "";
45
37
  }
46
38
 
47
- .glass-panel--liquid::before {
48
- z-index: 1;
49
- background: radial-gradient(
50
- circle at 18% 0%,
51
- color-mix(in srgb, white 32%, transparent),
52
- transparent 38%
53
- ),
54
- linear-gradient(
55
- 120deg,
56
- color-mix(in srgb, white 20%, transparent),
57
- transparent 22% 78%,
58
- color-mix(in srgb, white 8%, transparent)
59
- );
60
- mix-blend-mode: screen;
61
- opacity: 0.32;
62
- }
63
-
64
39
  .glass-panel--liquid::after {
65
- z-index: 2;
40
+ z-index: 1;
66
41
  padding: 1px;
67
- background: linear-gradient(
68
- 145deg,
69
- color-mix(in srgb, white 80%, transparent),
70
- transparent 24% 72%,
71
- color-mix(in srgb, var(--color-base-content) 9%, transparent)
72
- )
73
- border-box;
42
+ background: color-mix(in srgb, white 34%, transparent) border-box;
74
43
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
75
44
  mask-composite: exclude;
76
45
  -webkit-mask: linear-gradient(#000 0 0) content-box,
77
46
  linear-gradient(#000 0 0);
78
47
  -webkit-mask-composite: xor;
79
- opacity: 0.5;
48
+ opacity: 0.34;
80
49
  }
81
50
 
82
51
  .glass-panel--liquid > .glass-panel__header-button,
83
52
  .glass-panel--liquid > .glass-panel__content {
84
53
  position: relative;
85
- z-index: 3;
86
- }
87
-
88
- .glass-panel__liquid-filter {
89
- position: absolute;
90
- width: 0;
91
- height: 0;
92
- overflow: hidden;
93
- pointer-events: none;
94
- }
95
-
96
- @supports not (
97
- (backdrop-filter: url("#liquid-glass-filter")) or
98
- (-webkit-backdrop-filter: url("#liquid-glass-filter"))
99
- ) {
100
- .glass-panel--liquid {
101
- backdrop-filter: blur(10px) saturate(1.12);
102
- -webkit-backdrop-filter: blur(10px) saturate(1.12);
103
- }
54
+ z-index: 2;
104
55
  }
105
56
 
106
57
  .glass-panel--blur-none {
package/dist/components/glass-panel/GlassPanel.js CHANGED
@@ -3,7 +3,7 @@ import "./GlassPanel.css";
3
3
  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
- var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg class=glass-panel__liquid-filter aria-hidden=true><defs><filter x=-12% y=-12% width=124% height=124% color-interpolation-filters=sRGB><feImage href=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='left' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='rgb(56,128,128)'/%3E%3Cstop offset='1' stop-color='rgb(128,128,128)'/%3E%3C/linearGradient%3E%3ClinearGradient id='right' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='rgb(128,128,128)'/%3E%3Cstop offset='1' stop-color='rgb(200,128,128)'/%3E%3C/linearGradient%3E%3ClinearGradient id='top' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(128,56,128)'/%3E%3Cstop offset='1' stop-color='rgb(128,128,128)'/%3E%3C/linearGradient%3E%3ClinearGradient id='bottom' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(128,128,128)'/%3E%3Cstop offset='1' stop-color='rgb(128,200,128)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='512' height='512' fill='rgb(128,128,128)'/%3E%3Crect width='96' height='512' fill='url(%23left)'/%3E%3Crect x='416' width='96' height='512' fill='url(%23right)'/%3E%3Crect width='512' height='96' fill='url(%23top)' opacity='.72'/%3E%3Crect y='416' width='512' height='96' fill='url(%23bottom)' opacity='.72'/%3E%3C/svg%3E\"x=0 y=0 width=100% height=100% preserveAspectRatio=none result=displacement-map></feImage><feDisplacementMap in=SourceGraphic in2=displacement-map scale=14 xChannelSelector=R yChannelSelector=G result=refracted></feDisplacementMap><feColorMatrix in=refracted type=saturate values=1.16>"), _tmpl$2 = /*#__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$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>");
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><div><div>");
7
7
  const GlassPanel = (props)=>{
8
8
  const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
9
9
  "blur",
@@ -27,7 +27,6 @@ const GlassPanel = (props)=>{
27
27
  "style"
28
28
  ]);
29
29
  const contentId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
30
- const liquidFilterId = `glass-panel-liquid-${(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)().replace(/[^a-zA-Z0-9_-]/g, "")}`;
31
30
  const blur = ()=>local.blur ?? "none";
32
31
  const size = ()=>local.size ?? "md";
33
32
  const isLiquid = ()=>"liquid" === local.effect;
@@ -41,18 +40,9 @@ const GlassPanel = (props)=>{
41
40
  local.onToggle?.(next);
42
41
  };
43
42
  const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.base, !local.transparent && !isLiquid() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.blur[blur()], !local.transparent && isLiquid() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.liquid, local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.transparent, local.glow && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.glow, local.accent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.accent[accentKey()], local.class, local.className);
44
- const containerStyle = ()=>{
45
- if (!isLiquid()) return local.style;
46
- const liquidBackdropFilter = `url(#${liquidFilterId}) blur(12px) saturate(1.22)`;
47
- return Object.assign({}, "object" == typeof local.style ? local.style : void 0, {
48
- "--glass-panel-liquid-filter": `url(#${liquidFilterId})`,
49
- "-webkit-backdrop-filter": liquidBackdropFilter,
50
- "backdrop-filter": liquidBackdropFilter
51
- });
52
- };
53
43
  const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.content, local.collapsible && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentCollapsible, local.collapsible && !isOpen() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentCollapsed, (!local.collapsible || isOpen()) && !(local.paddingX || local.paddingY) && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.size[size()], local.paddingX, local.paddingY);
54
44
  return (()=>{
55
- var _el$ = _tmpl$3(), _el$9 = _el$.firstChild, _el$0 = _el$9.firstChild;
45
+ var _el$ = _tmpl$2(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild;
56
46
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
57
47
  class: containerClasses()
58
48
  }), {
@@ -63,27 +53,16 @@ const GlassPanel = (props)=>{
63
53
  return isLiquid() ? "liquid" : void 0;
64
54
  },
65
55
  get style () {
66
- return containerStyle();
56
+ return local.style;
67
57
  }
68
58
  }), false, true);
69
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
70
- get when () {
71
- return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!local.transparent)() && isLiquid();
72
- },
73
- get children () {
74
- var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
75
- _el$4.firstChild;
76
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "id", liquidFilterId);
77
- return _el$2;
78
- }
79
- }), _el$9);
80
59
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
81
60
  get when () {
82
61
  return local.collapsible && local.title;
83
62
  },
84
63
  get children () {
85
- var _el$6 = _tmpl$2(), _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling;
86
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
64
+ var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
65
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
87
66
  class: __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.headerButton
88
67
  }), {
89
68
  onClick: handleToggle,
@@ -92,10 +71,10 @@ const GlassPanel = (props)=>{
92
71
  },
93
72
  "aria-controls": contentId
94
73
  }), false, true);
95
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
74
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
96
75
  class: __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.headerLabel
97
76
  })), false, true);
98
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
77
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
99
78
  get when () {
100
79
  return local.icon;
101
80
  },
@@ -103,8 +82,8 @@ const GlassPanel = (props)=>{
103
82
  return local.icon;
104
83
  }
105
84
  }), null);
106
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.title, null);
107
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
85
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.title, null);
86
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
108
87
  class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.chevron, isOpen() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.chevronOpen)
109
88
  }), {
110
89
  "aria-hidden": "true",
@@ -113,11 +92,11 @@ const GlassPanel = (props)=>{
113
92
  stroke: "currentColor",
114
93
  "stroke-width": "1.5"
115
94
  }), true, true);
116
- return _el$6;
95
+ return _el$2;
117
96
  }
118
- }), _el$9);
119
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$9, "id", contentId);
120
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
97
+ }), _el$5);
98
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "id", contentId);
99
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
121
100
  class: contentClasses()
122
101
  }), {
123
102
  get style () {
@@ -127,10 +106,10 @@ const GlassPanel = (props)=>{
127
106
  };
128
107
  }
129
108
  }), false, true);
130
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
109
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
131
110
  class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.contentInner, local.collapsible && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentInnerHidden)
132
111
  })), false, true);
133
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>local.children);
112
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
134
113
  return _el$;
135
114
  })();
136
115
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pathscale/ui",
3
- "version": "1.1.74",
3
+ "version": "1.1.75",
4
4
  "author": "pathscale",
5
5
  "repository": {
6
6
  "type": "git",