@pathscale/ui 1.2.4 → 1.2.5

package/dist/components/glass-panel/GlassPanel.classes.d.ts

@@ -9,6 +9,9 @@ export declare const CLASSES: {
     };
     readonly flag: {
         readonly transparent: "glass-panel--transparent";
+        readonly toneSecondary: "glass-panel--tone-secondary";
+        readonly highlight: "glass-panel--highlight";
+        readonly interactive: "glass-panel--interactive";
         readonly contentCollapsed: "glass-panel__content--collapsed";
         readonly contentCollapsible: "glass-panel__content--collapsible";
         readonly contentInnerHidden: "glass-panel__content-inner--hidden";

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

@@ -9,6 +9,9 @@ const CLASSES = {
     },
     flag: {
         transparent: "glass-panel--transparent",
+        toneSecondary: "glass-panel--tone-secondary",
+        highlight: "glass-panel--highlight",
+        interactive: "glass-panel--interactive",
         contentCollapsed: "glass-panel__content--collapsed",
         contentCollapsible: "glass-panel__content--collapsible",
         contentInnerHidden: "glass-panel__content-inner--hidden",

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

@@ -18,13 +18,13 @@
     );
     --glass-panel-bottom-highlight: color-mix(
       in oklab,
-      var(--glass-highlight-color, white)
+      var(--glass-bottom-highlight-color, var(--glass-highlight-color, white))
         var(--glass-bottom-highlight-opacity, 10%),
       transparent
     );
     --glass-panel-edge-highlight: color-mix(
       in oklab,
-      var(--glass-highlight-color, white)
+      var(--glass-refraction-color, var(--glass-highlight-color, white))
         var(--glass-edge-highlight-opacity, 30%),
       transparent
     );
@@ -57,7 +57,7 @@
     );
     --glass-panel-depth-bottom-glow: color-mix(
       in oklab,
-      var(--glass-highlight-color, white)
+      var(--glass-bottom-highlight-color, var(--glass-highlight-color, white))
         var(--glass-depth-bottom-glow-opacity, 12%),
       transparent
     );
@@ -134,6 +134,83 @@
     display: none;
   }
 
+  .glass-panel--tone-secondary:not(.glass-panel--transparent) {
+    background: color-mix(
+      in oklab,
+      var(--glass-background-color, white)
+        var(
+          --glass-app-secondary-surface-opacity,
+          var(--glass-app-surface-elevated-opacity, 0%)
+        ),
+      transparent
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--glass-border-color, white)
+        var(
+          --glass-app-secondary-border-opacity,
+          var(--glass-app-border-opacity, 0%)
+        ),
+      transparent
+    );
+  }
+
+  .glass-panel--highlight:not(.glass-panel--transparent) {
+    background: linear-gradient(
+      135deg,
+      color-mix(
+        in oklab,
+        var(--color-primary) var(--glass-app-highlight-tint-opacity, 14%),
+        transparent
+      ),
+      color-mix(
+        in oklab,
+        var(--glass-highlight-color, white)
+          var(--glass-app-highlight-surface-opacity, 12%),
+        transparent
+      )
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--color-primary) var(--glass-app-highlight-border-opacity, 28%),
+      transparent
+    );
+    box-shadow: var(--glass-shadow-depth, 0 8px 32px rgb(0 0 0 / 10%)), 0
+      10px 24px
+      color-mix(
+        in oklab,
+        var(--color-primary) var(--glass-app-highlight-glow-opacity, 12%),
+        transparent
+      ), inset 0 1px 0 var(--glass-panel-highlight), inset 0 -1px 0
+      var(--glass-panel-bottom-highlight);
+  }
+
+  .glass-panel--interactive:not(.glass-panel--transparent) {
+    cursor: pointer;
+  }
+
+  .glass-panel--interactive:not(.glass-panel--transparent):hover {
+    background: linear-gradient(
+      135deg,
+      color-mix(
+        in oklab,
+        var(--color-primary) var(--glass-app-hover-tint-opacity, 8%),
+        transparent
+      ),
+      color-mix(
+        in oklab,
+        var(--glass-highlight-color, white)
+          var(--glass-app-hover-surface-opacity, 8%),
+        transparent
+      )
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--color-primary) var(--glass-app-hover-border-opacity, 18%),
+      transparent
+    );
+  }
+
   .glass-panel__header-button {
     display: flex;
     width: 100%;
@@ -205,7 +282,7 @@
       circle at 50% 45%,
       color-mix(
           in oklab,
-          var(--glass-highlight-color, white)
+          var(--glass-depth-color, var(--glass-highlight-color, white))
             var(--glass-depth-surface-opacity, 8%),
           transparent
         )

package/dist/components/glass-panel/GlassPanel.d.ts

@@ -12,6 +12,9 @@ export type GlassPanelProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivEl
     transparent?: boolean;
     paddingX?: string;
     paddingY?: string;
+    tone?: "default" | "secondary";
+    highlight?: boolean;
+    interactive?: boolean;
 };
 declare const GlassPanel: (props: GlassPanelProps) => JSX.Element;
 export default GlassPanel;

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

@@ -16,6 +16,9 @@ const GlassPanel = (props)=>{
         "transparent",
         "paddingX",
         "paddingY",
+        "tone",
+        "highlight",
+        "interactive",
         "children",
         "class",
         "className",
@@ -32,7 +35,7 @@ const GlassPanel = (props)=>{
         if (!isControlled()) setInternalOpen(next);
         local.onToggle?.(next);
     };
-    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.base, local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.transparent, local.class, local.className);
+    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.base, local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.transparent, "secondary" === local.tone && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.toneSecondary, local.highlight && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.highlight, local.interactive && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.interactive, 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$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$8 = _el$4.nextSibling, _el$9 = _el$8.firstChild;