@flux-ui/components 3.0.0-next.66 → 3.0.0-next.68

package/src/css/component/LayerPane.module.scss

@@ -1,23 +1,85 @@
 .layerPane {
     display: flex;
     flex-flow: column;
-    border: 1px solid var(--surface-stroke-out);
-    border-radius: var(--radius);
-    background: var(--gray-50);
     background-clip: padding-box;
+    border: 1px solid;
+    border-radius: var(--radius);
+    contain: paint;
+
+    > :local(.basePaneStructure) {
+        border-color: inherit;
+    }
+}
+
+.layerPaneGray {
+    composes: layerPane;
+
+    background-color: var(--gray-50);
+    border-color: var(--surface-stroke-out);
+}
+
+.layerPanePrimary {
+    composes: layerPane;
+
+    background-color: var(--primary-100);
+    border-color: var(--primary-200);
+}
+
+.layerPaneDanger {
+    composes: layerPane;
+
+    background-color: var(--danger-100);
+    border-color: var(--danger-200);
+
+    :local(.paneHeaderIcon) {
+        color: var(--danger-600);
+    }
+}
+
+.layerPaneInfo {
+    composes: layerPane;
+
+    background-color: var(--info-100);
+    border-color: var(--info-200);
+
+    :local(.paneHeaderIcon) {
+        color: var(--info-600);
+    }
+}
+
+.layerPaneSuccess {
+    composes: layerPane;
+
+    background-color: var(--success-100);
+    border-color: var(--success-200);
+
+    :local(.paneHeaderIcon) {
+        color: var(--success-600);
+    }
+}
+
+.layerPaneWarning {
+    composes: layerPane;
+
+    background-color: var(--warning-100);
+    border-color: var(--warning-200);
+
+    :local(.paneHeaderIcon) {
+        color: var(--warning-600);
+    }
 }
 
 .layerPane > .basePaneStructure {
-    border-right-width: 0;
-    border-left-width: 0;
+    margin-left: -1px;
+    margin-right: -1px;
 }
 
 .layerPane > .basePaneStructure:first-child {
-    border-top-width: 0;
+    margin-top: -1px;
 }
 
 .layerPane > .basePaneStructure:last-child {
-    border-bottom-width: 0;
+    margin-bottom: -1px;
 }
 
 .layerPane > .basePaneStructure + .basePaneStructure {

package/src/css/component/Overlay.module.scss

@@ -16,7 +16,7 @@
     composes: overlayView;
 
     background: var(--overlay);
-    backdrop-filter: blur(3px) saturate(180%);
+    backdrop-filter: blur(3px) grayscale(.5) saturate(180%);
     pointer-events: none;
     transition: opacity 600ms var(--swift-out);
 }
@@ -58,8 +58,8 @@
             background: var(--overlay-secondary);
             opacity: 0;
             pointer-events: none;
-            transition: opacity 420ms var(--swift-out);
-            z-index: 1;
+            transition: opacity 600ms var(--swift-out);
+            z-index: 1000;
         }
     }
 
@@ -111,6 +111,7 @@
         max-height: calc(100% - 18px);
         width: min(100dvw, 720px);
         contain: paint;
+        transition-duration: 600ms;
         overflow: auto;
 
         > .paneHeader,
@@ -154,10 +155,10 @@
 
 .overlayTransitionEnterActive,
 .overlayTransitionLeaveActive {
-    transition: opacity 420ms var(--swift-out);
+    transition: opacity 300ms var(--swift-out);
 
     > .basePaneStructure {
-        transition: 420ms var(--swift-out);
+        transition: 300ms var(--swift-out);
         transition-property: opacity, scale;
     }
 }
@@ -182,10 +183,10 @@
 
 .slideOverTransitionEnterActive,
 .slideOverTransitionLeaveActive {
-    transition: opacity 600ms var(--swift-out);
+    transition: opacity 480ms var(--swift-out);
 
     > .basePaneStructure {
-        transition: 600ms var(--swift-out);
+        transition: 480ms var(--swift-out);
         transition-property: opacity, transform;
     }
 }

package/src/css/component/Transition.module.scss

@@ -95,13 +95,13 @@
 .verticalWindowTransitionEnterActive,
 .verticalWindowTransitionBackEnterActive {
     contain: paint;
-    transition: 120ms var(--deceleration-curve);
+    transition: 105ms var(--deceleration-curve);
     transition-property: opacity, transform;
 }
 
 .verticalWindowTransitionLeaveActive,
 .verticalWindowTransitionBackLeaveActive {
-    transition: 120ms var(--acceleration-curve);
+    transition: 105ms var(--acceleration-curve);
     transition-property: opacity, transform;
 }
 
@@ -119,13 +119,13 @@
 
 .windowTransitionEnterActive,
 .windowTransitionBackEnterActive {
-    transition: 120ms var(--deceleration-curve);
+    transition: 105ms var(--deceleration-curve);
     transition-property: height, opacity, transform;
 }
 
 .windowTransitionLeaveActive,
 .windowTransitionBackLeaveActive {
-    transition: 120ms var(--acceleration-curve);
+    transition: 105ms var(--acceleration-curve);
     transition-property: height, opacity, transform;
 }
 

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './transition';
 
 export {
     fluxRegisterIcons,
+    iconRegistry,
     isFluxFormSelectGroup,
     isFluxFormSelectOption,
     showAlert,

package/src/util/createDialogRenderer.ts

@@ -31,7 +31,6 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
         }
 
         dialog.addEventListener('keydown', onKeyDown, {passive: true});
-        dialog.focus();
 
         onCleanup(() => {
             dialog.removeEventListener('keydown', onKeyDown);