@pathscale/ui 1.1.80 → 1.1.81

package/dist/components/glass-panel/GlassPanel.css

@@ -1,115 +1,179 @@
 @layer components {
   .glass-panel {
-    position: relative;
-    border-radius: 0.75rem;
-    transition: all 200ms ease-in-out;
-    background: color-mix(in srgb, var(--color-base-300) 45%, transparent);
-    border: 1px solid
-      color-mix(in srgb, var(--color-base-content) 12%, transparent);
-  }
-
-  .glass-panel--transparent {
-    background: transparent;
-    border-color: transparent;
-  }
-
-  .glass-panel--glow {
-    box-shadow: inset 0 1px 0
-      color-mix(in srgb, var(--color-base-content) 5%, transparent);
-  }
-
-  .glass-panel--liquid {
-    --glass-panel-liquid-bg: color-mix(
+    --glass-panel-blur: var(--glass-blur, 11px);
+    --glass-panel-background: color-mix(
       in oklab,
-      var(--color-base-100) 12%,
+      var(--glass-background-color, white) var(--glass-background-opacity, 38%),
       transparent
     );
-    --glass-panel-liquid-border: color-mix(
+    --glass-panel-border: color-mix(
       in oklab,
-      var(--color-base-content) 14%,
+      var(--glass-border-color, white) var(--glass-border-opacity, 30%),
       transparent
     );
-    --glass-panel-liquid-highlight: color-mix(
+    --glass-panel-highlight: color-mix(
       in oklab,
-      var(--color-base-100) 48%,
+      var(--glass-highlight-color, white) var(--glass-highlight-opacity, 80%),
       transparent
     );
-    --glass-panel-liquid-inner: color-mix(
+    --glass-panel-bottom-highlight: color-mix(
       in oklab,
-      var(--color-base-100) 10%,
+      var(--glass-highlight-color, white)
+        var(--glass-bottom-highlight-opacity, 10%),
       transparent
     );
-    --glass-panel-liquid-brightness: 1.03;
-    --glass-panel-liquid-saturation: 1.18;
-    isolation: isolate;
-    overflow: hidden;
-    background: var(--glass-panel-liquid-bg);
-    border-color: var(--glass-panel-liquid-border);
-    box-shadow:
-      inset 0 0 3px 0 var(--glass-panel-liquid-highlight),
-      inset 0 1px 10px var(--glass-panel-liquid-inner);
-    backdrop-filter: blur(1px) blur(2px)
-      brightness(var(--glass-panel-liquid-brightness, 1.08))
-      saturate(var(--glass-panel-liquid-saturation, 1.35));
-    -webkit-backdrop-filter: blur(1px) blur(2px)
-      brightness(var(--glass-panel-liquid-brightness, 1.08))
-      saturate(var(--glass-panel-liquid-saturation, 1.35));
-  }
-
-  [data-theme="dark"] .glass-panel--liquid,
-  .glass-panel--liquid[data-theme="dark"] {
-    --glass-panel-liquid-bg: color-mix(
+    --glass-panel-edge-highlight: color-mix(
+      in oklab,
+      var(--glass-highlight-color, white)
+        var(--glass-edge-highlight-opacity, 30%),
+      transparent
+    );
+    --glass-panel-depth-sheen: color-mix(
+      in oklab,
+      var(--glass-highlight-color, white) var(--glass-depth-sheen-opacity, 40%),
+      transparent
+    );
+    --glass-panel-rim-start: color-mix(
       in oklab,
-      var(--color-base-200) 22%,
+      var(--glass-rim-start-color, var(--glass-border-color, white))
+        var(--glass-rim-start-opacity, 21%),
       transparent
     );
-    --glass-panel-liquid-border: color-mix(
+    --glass-panel-rim-end: color-mix(
       in oklab,
-      var(--color-base-content) 10%,
+      var(--glass-rim-end-color, var(--glass-highlight-color, white))
+        var(--glass-rim-end-opacity, 35%),
       transparent
     );
-    --glass-panel-liquid-highlight: color-mix(
+    --glass-panel-inner-glow: rgb(
+      var(--glass-inner-glow-rgb, 255 255 255) /
+      var(--glass-inner-glow-alpha, 0.5)
+    );
+    --glass-panel-depth-top-glow: color-mix(
       in oklab,
-      var(--color-base-content) 14%,
+      var(--glass-highlight-color, white)
+        var(--glass-depth-top-glow-opacity, 8%),
       transparent
     );
-    --glass-panel-liquid-inner: color-mix(
+    --glass-panel-depth-bottom-glow: color-mix(
       in oklab,
-      var(--color-base-content) 5%,
+      var(--glass-highlight-color, white)
+        var(--glass-depth-bottom-glow-opacity, 12%),
       transparent
     );
-    --glass-panel-liquid-brightness: 0.98;
-    --glass-panel-liquid-saturation: 1.08;
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border-radius: var(--glass-border-radius, 20px);
+    transition: background-color 200ms ease-in-out, border-color 200ms
+      ease-in-out, box-shadow 200ms ease-in-out, backdrop-filter 200ms
+      ease-in-out;
+    background: var(--glass-panel-background);
+    border: 1px solid var(--glass-panel-border);
+    box-shadow: var(--glass-shadow-depth, 0 8px 32px rgb(0 0 0 / 10%)), inset 0
+      1px 0 var(--glass-panel-highlight), inset 0 -1px 0
+      var(--glass-panel-bottom-highlight);
+    backdrop-filter: blur(var(--glass-panel-blur));
+    -webkit-backdrop-filter: blur(var(--glass-panel-blur));
+  }
+
+  .glass-panel::before,
+  .glass-panel::after {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .glass-panel::before {
+    top: 0;
+    right: 12%;
+    left: 12%;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--glass-panel-highlight),
+      transparent
+    );
+  }
+
+  .glass-panel::after {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 1px;
+    background: linear-gradient(
+      180deg,
+      var(--glass-panel-highlight),
+      transparent 45%,
+      var(--glass-panel-edge-highlight)
+    );
+  }
+
+  .glass-panel--transparent {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .glass-panel--transparent::before,
+  .glass-panel--transparent::after,
+  .glass-panel--transparent > .glass-panel__rim,
+  .glass-panel--transparent > .glass-panel__depth,
+  .glass-panel--transparent > .glass-panel__sheen {
+    display: none;
+  }
+
+  .glass-panel--glow {
+    box-shadow: var(--glass-shadow-depth, 0 8px 32px rgb(0 0 0 / 10%)), 0 0 0
+      1px
+      color-mix(
+        in oklab,
+        var(--color-primary) var(--glass-glow-ring-opacity, 10%),
+        transparent
+      ), inset 0 1px 0 var(--glass-panel-highlight), inset 0 -1px 0
+      var(--glass-panel-bottom-highlight);
+  }
+
+  .glass-panel--liquid {
+    box-shadow: var(--glass-shadow-depth, 0 8px 32px rgb(0 0 0 / 10%)), inset 0
+      0 var(--glass-liquid-edge-size, 3px) 0 var(--glass-panel-highlight), inset
+      0 1px var(--glass-liquid-inner-blur, 18px)
+      var(--glass-panel-edge-highlight);
   }
 
   .glass-panel--liquid > .glass-panel__header-button,
   .glass-panel--liquid > .glass-panel__content {
     position: relative;
-    z-index: 1;
+    z-index: 2;
   }
 
   .glass-panel--blur-none {
     backdrop-filter: none;
+    -webkit-backdrop-filter: none;
   }
 
   .glass-panel--blur-sm {
-    backdrop-filter: blur(4px);
+    --glass-panel-blur: calc(var(--glass-blur, 11px) * 0.5);
   }
 
   .glass-panel--blur-md {
-    backdrop-filter: blur(12px);
+    --glass-panel-blur: var(--glass-blur, 11px);
   }
 
   .glass-panel--blur-lg {
-    backdrop-filter: blur(16px);
+    --glass-panel-blur: calc(var(--glass-blur, 11px) * 1.25);
   }
 
   .glass-panel--blur-xl {
-    backdrop-filter: blur(24px);
+    --glass-panel-blur: calc(var(--glass-blur, 11px) * 1.5);
   }
 
   .glass-panel--blur-2xl {
-    backdrop-filter: blur(40px);
+    --glass-panel-blur: calc(var(--glass-blur, 11px) * 2);
   }
 
   .glass-panel--accent-primary,
@@ -161,6 +225,8 @@
   }
 
   .glass-panel__header-button {
+    position: relative;
+    z-index: 2;
     display: flex;
     width: 100%;
     cursor: pointer;
@@ -200,7 +266,64 @@
     transform: rotate(180deg);
   }
 
+  .glass-panel__rim,
+  .glass-panel__depth,
+  .glass-panel__sheen {
+    position: absolute;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .glass-panel__rim {
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(
+      180deg,
+      var(--glass-panel-rim-start) 1%,
+      var(--glass-panel-rim-end) 100%
+    );
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+  }
+
+  .glass-panel__depth {
+    inset: 1px;
+    border-radius: max(0px, calc(var(--glass-border-radius, 20px) - 1px));
+    background: radial-gradient(
+      circle at 50% 45%,
+      color-mix(
+          in oklab,
+          var(--glass-highlight-color, white)
+            var(--glass-depth-surface-opacity, 8%),
+          transparent
+        )
+        0%,
+      transparent var(--glass-depth-surface-size, 82%)
+    );
+    box-shadow: inset 0 0 var(--glass-inner-glow-blur, 10px)
+      var(--glass-inner-glow-spread, 5px) var(--glass-panel-inner-glow), inset 0
+      2px 4px 0 var(--glass-panel-depth-top-glow), inset 0 -2px 2px 0
+      var(--glass-panel-depth-bottom-glow);
+  }
+
+  .glass-panel__sheen {
+    inset: 2px;
+    border-radius: max(0px, calc(var(--glass-border-radius, 20px) - 2px));
+    background: radial-gradient(
+      circle at 30% 20%,
+      var(--glass-panel-depth-sheen) 0%,
+      transparent var(--glass-depth-sheen-size, 70%)
+    );
+    mix-blend-mode: overlay;
+  }
+
   .glass-panel__content {
+    position: relative;
+    z-index: 2;
     display: grid;
     transition: grid-template-rows 200ms ease-in-out, opacity 200ms ease-in-out;
   }
@@ -236,4 +359,18 @@
   .glass-panel__content--xl {
     padding: 1.5rem;
   }
+
+  @supports not (
+      (backdrop-filter: blur(1px)) or
+      (-webkit-backdrop-filter: blur(1px))
+    ) {
+    .glass-panel {
+      background: color-mix(
+        in oklab,
+        var(--glass-background-color, white)
+          var(--glass-fallback-background-opacity, 78%),
+        transparent
+      );
+    }
+  }
 }

package/dist/components/glass-panel/GlassPanel.js

@@ -3,12 +3,11 @@ import "./GlassPanel.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__ from "./GlassPanel.classes.js";
-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>");
-const LIQUID_DEPTH_RATIO = 0.05;
-const LIQUID_RADIUS_RATIO = 0.08;
-const LIQUID_STRENGTH_RATIO = 0.5;
-const LIQUID_CHROMATIC_ABERRATION_RATIO = 0.025;
-const LIQUID_BLUR = 2;
+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>");
+const DEFAULT_GLASS_REFRACTION_DEPTH = 10;
+const DEFAULT_GLASS_REFRACTION_RADIUS_RATIO = 0.08;
+const DEFAULT_GLASS_REFRACTION_STRENGTH = 0.42;
+const DEFAULT_GLASS_CHROMATIC_ABERRATION = 0.018;
 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">
     <style>
         .mix { mix-blend-mode: screen; }
@@ -129,6 +128,10 @@ const getPx = (value)=>{
     const parsed = Number.parseFloat(value);
     return Number.isFinite(parsed) ? parsed : 0;
 };
+const getCssNumber = (style, name, fallback)=>{
+    const parsed = Number.parseFloat(style.getPropertyValue(name));
+    return Number.isFinite(parsed) ? parsed : fallback;
+};
 const callEventHandler = (handler, event)=>{
     if ("function" == typeof handler) handler(event);
 };
@@ -156,7 +159,7 @@ const GlassPanel = (props)=>{
         "style"
     ]);
     const contentId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
-    const blur = ()=>local.blur ?? "none";
+    const blur = ()=>local.blur ?? "md";
     const size = ()=>local.size ?? "md";
     const isLiquid = ()=>"liquid" === local.effect;
     const [geometry, setGeometry] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
@@ -198,24 +201,29 @@ const GlassPanel = (props)=>{
         }
         const nextGeometry = geometry();
         if (!nextGeometry) return;
+        const style = window.getComputedStyle(element);
         const minSide = Math.min(nextGeometry.width, nextGeometry.height);
         const maxDepth = Math.max(1, Math.floor(minSide / 2) - 1);
-        const depth = Math.min(maxDepth, Math.max(10, Math.round(minSide * LIQUID_DEPTH_RATIO)) / (pressed() ? 0.7 : 1));
+        const baseDepth = Math.max(1, getCssNumber(style, "--glass-refraction-depth", DEFAULT_GLASS_REFRACTION_DEPTH));
+        const depth = Math.min(maxDepth, baseDepth * (pressed() ? 1.35 : 1));
+        const radiusRatio = getCssNumber(style, "--glass-refraction-radius-ratio", DEFAULT_GLASS_REFRACTION_RADIUS_RATIO);
+        const strengthRatio = getCssNumber(style, "--glass-refraction-strength", DEFAULT_GLASS_REFRACTION_STRENGTH);
+        const chromaticRatio = getCssNumber(style, "--glass-refraction-chromatic-aberration", DEFAULT_GLASS_CHROMATIC_ABERRATION);
         const filter = getDisplacementFilter({
             ...nextGeometry,
-            radius: Math.max(nextGeometry.radius, Math.round(minSide * LIQUID_RADIUS_RATIO)),
+            radius: Math.max(nextGeometry.radius, Math.round(minSide * radiusRatio)),
             depth,
-            strength: Math.round(minSide * LIQUID_STRENGTH_RATIO),
-            chromaticAberration: Math.round(minSide * LIQUID_CHROMATIC_ABERRATION_RATIO)
+            strength: Math.round(minSide * strengthRatio),
+            chromaticAberration: Math.round(minSide * chromaticRatio)
         });
-        const backdropFilter = `blur(${LIQUID_BLUR / 2}px) url('${filter}') blur(${LIQUID_BLUR}px) brightness(var(--glass-panel-liquid-brightness, 1.1)) saturate(var(--glass-panel-liquid-saturation, 1.5))`;
+        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))`;
         element.style.backdropFilter = backdropFilter;
         element.style.setProperty("-webkit-backdrop-filter", backdropFilter);
     });
     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);
     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);
     return (()=>{
-        var _el$ = _tmpl$2(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild;
+        var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$8 = _el$4.nextSibling, _el$9 = _el$8.firstChild;
         var _ref$ = rootRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : rootRef = _el$;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
@@ -248,8 +256,8 @@ const GlassPanel = (props)=>{
                 return local.collapsible && local.title;
             },
             get children () {
-                var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                var _el$5 = _tmpl$(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                         class: __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.headerButton
                     }), {
                     onClick: handleToggle,
@@ -258,10 +266,10 @@ const GlassPanel = (props)=>{
                     },
                     "aria-controls": contentId
                 }), false, true);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                         class: __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.headerLabel
                     })), false, true);
-                (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, {
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                     get when () {
                         return local.icon;
                     },
@@ -269,8 +277,8 @@ const GlassPanel = (props)=>{
                         return local.icon;
                     }
                 }), null);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.title, null);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.title, null);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                         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)
                     }), {
                     "aria-hidden": "true",
@@ -279,11 +287,11 @@ const GlassPanel = (props)=>{
                     stroke: "currentColor",
                     "stroke-width": "1.5"
                 }), true, true);
-                return _el$2;
+                return _el$5;
             }
-        }), _el$5);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "id", contentId);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+        }), _el$8);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$8, "id", contentId);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                 class: contentClasses()
             }), {
             get style () {
@@ -293,10 +301,10 @@ const GlassPanel = (props)=>{
                 };
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                 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)
             })), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
         return _el$;
     })();
 };

package/dist/components/glow-card/GlowCard.css

@@ -1,6 +1,16 @@
 .glow-card {
-  --glow-color-border: oklch(100% 0 0 / 0.3);
-  --glow-color-bg: oklch(100% 0 0 / 0.1);
+  --glow-color-border: color-mix(
+    in oklab,
+    var(--glass-highlight-color, var(--color-base-content))
+      var(--glass-border-opacity, 24%),
+    transparent
+  );
+  --glow-color-bg: color-mix(
+    in oklab,
+    var(--glass-highlight-color, var(--color-base-100))
+      var(--glass-background-opacity, 58%),
+    transparent
+  );
   position: relative;
   border-radius: inherit;
 }
@@ -28,12 +38,8 @@
   );
   z-index: 1;
   inset: -1px;
-  -webkit-mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   padding: 1px;
@@ -53,14 +59,6 @@
   opacity: 1;
 }
 
-[data-theme="light"] .glow-card::before {
-  --glow-color-border: oklch(30% 0.15 260 / 0.4);
-}
-
-[data-theme="light"] .glow-card::after {
-  --glow-color-bg: oklch(30% 0.15 260 / 0.15);
-}
-
 @media (prefers-reduced-motion: reduce) {
   .glow-card::before,
   .glow-card::after {