@flux-ui/components 3.0.0-next.2 → 3.0.0-next.21

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

@@ -1,63 +1,59 @@
 @use '$flux/css/mixin';
 
-@value baseAutoGrid from './base/Grid.module.scss';
+.aspectRatio {
+    position: relative;
+    flex-shrink: 0;
 
-@layer flux-base {
-    .aspectRatio {
-        position: relative;
-        flex-shrink: 0;
-
-        > * {
-            height: 100%;
-            width: 100%;
-        }
+    > * {
+        height: 100%;
+        width: 100%;
     }
+}
 
-    .autoGrid {
-        composes: baseAutoGrid;
-    }
+.autoGrid {
+    composes: baseAutoGrid from './base/Grid.module.scss';
+}
 
-    .container {
-        margin-left: auto;
-        margin-right: auto;
-        padding-left: var(--gutter);
-        padding-right: var(--gutter);
-        width: 100%;
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--gutter);
+    padding-right: var(--gutter);
+    width: 100%;
 
-        @include mixin.breakpoint-max-widths;
-    }
+    @include mixin.breakpoint-max-widths;
+}
 
-    .spacer {
-        flex-grow: 1;
-    }
+.spacer {
+    flex-grow: 1;
+}
 
-    .stack {
-        gap: var(--gap, 0);
+.stack {
+    gap: var(--gap, 0);
 
-        &.isCentered {
-            place-content: center;
-            place-items: center;
-        }
+    &.isCentered {
+        place-content: center;
+        place-items: center;
+    }
 
-        &.isFill {
-            width: 100%;
-        }
+    &.isFill {
+        width: 100%;
+    }
 
-        &.isWrapping {
-            flex-wrap: wrap;
-        }
+    &.isWrapping {
+        flex-wrap: wrap;
     }
+}
 
-    .stackHorizontal {
-        composes: stack;
+.stackHorizontal {
+    composes: stack;
 
-        display: flex;
-    }
+    display: flex;
+}
 
-    .stackVertical {
-        composes: stack;
+.stackVertical {
+    composes: stack;
 
-        display: flex;
-        flex-flow: column;
-    }
+    display: flex;
+    flex-flow: column;
 }

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

@@ -1,13 +1,11 @@
-@value stackHorizontal, stackVertical from './Layout.module.scss';
-
 .legendHorizontal {
-    composes: stackHorizontal;
+    composes: stackHorizontal from './Layout.module.scss';
 
     gap: 12px 21px;
 }
 
 .legendVertical {
-    composes: stackVertical;
+    composes: stackVertical from './Layout.module.scss';
 
     gap: 12px;
 }

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

@@ -1,8 +1,5 @@
 @use '$flux/css/mixin';
 
-@value button, buttonIcon, buttonLabel from './base/Button.module.scss';
-@value basePane from './base/Pane.module.scss';
-
 .menu {
     display: flex;
     flex-flow: column;
@@ -40,7 +37,7 @@
 }
 
 .menuItem {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     height: unset;
     min-height: 42px;
@@ -53,22 +50,22 @@
     text-align: left;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
+        background: var(--gray-3);
     }
 }
 
 .menuItemIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: var(--foreground-prominent);
 }
 
 .menuItemLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 
     flex-grow: 1;
     font-weight: 400;
@@ -82,64 +79,46 @@
 }
 
 .menuItemActive {
-    background: rgb(var(--primary-7));
-    color: rgb(var(--primary-1));
+    background: var(--primary-7);
+    color: var(--primary-1);
 
     .menuItemIcon {
-        color: rgb(var(--primary-0));
+        color: var(--primary-0);
     }
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-7));
-        }
+    @include mixin.hover {
+        background: var(--primary-7);
     }
 
     &:active {
-        background: rgb(var(--primary-7));
+        background: var(--primary-7);
     }
 }
 
 .menuItemDestructive {
     .menuItemIcon {
-        color: rgb(var(--danger-8));
+        color: var(--danger-8);
     }
 
     .menuItemLabel {
-        color: rgb(var(--danger-8));
+        color: var(--danger-8);
     }
 }
 
 .menuItemHighlighted {
-    background: rgb(var(--primary-2));
-    color: rgb(var(--primary-7));
+    background: var(--primary-2);
+    color: var(--primary-7);
 
     .menuItemIcon {
-        color: rgb(var(--primary-8));
+        color: var(--primary-8);
     }
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-2));
-        }
-    }
-
-    &:active {
-        background: rgb(var(--primary-2));
-    }
-}
-
-[dark] .menuItemHighlighted {
-    background: rgb(var(--primary-11) / .5);
-
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-11) / .5);
-        }
+    @include mixin.hover {
+        background: var(--primary-2);
     }
 
     &:active {
-        background: rgb(var(--primary-11) / .5);
+        background: var(--primary-2);
     }
 }
 
@@ -148,11 +127,11 @@
 }
 
 .menuItemSelectableIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 }
 
 .menuItemSelected .menuItemSelectableIcon {
-    color: rgb(var(--primary-7));
+    color: var(--primary-7);
 }
 
 .menuItemCommand {
@@ -180,7 +159,7 @@
 
 .menuItemActive .menuItemCommand,
 .menuItemActive .menuItemCommandIcon {
-    color: rgb(var(--primary-4));
+    color: var(--primary-4);
 }
 
 .menuItemImage {
@@ -216,7 +195,7 @@
     padding: 12px 12px 6px;
     align-items: center;
     gap: 9px;
-    background: linear-gradient(to bottom, rgb(var(--gray-0)) 75%, transparent);
+    background: linear-gradient(to bottom, var(--gray-0) 75%, transparent);
     font-size: 14px;
     pointer-events: none;
     z-index: 1;
@@ -252,7 +231,7 @@
         bottom: 12px;
         width: 4px;
         content: '';
-        background: rgb(var(--primary-7));
+        background: var(--primary-7);
         border-radius: 99px;
         opacity: 0;
         transition: opacity 180ms var(--swift-out);
@@ -263,7 +242,7 @@
     min-height: 48px;
 
     &::after {
-        background: rgb(var(--primary-0));
+        background: var(--primary-0);
     }
 }
 
@@ -273,7 +252,7 @@
     }
 
     &.menuItemIndented {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
 
         .menuItemIcon,
         .menuItemLabel {
@@ -282,7 +261,7 @@
     }
 }
 
-:local(.basePane) > .menu {
+.basePane > .menu {
     margin-left: 9px;
     margin-right: 9px;
 
@@ -299,7 +278,7 @@
     }
 }
 
-:local(.expandableBody) > .menu {
+.expandableBody > .menu {
     margin-left: 9px;
     margin-right: 9px;
 

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

@@ -1,9 +1,7 @@
 @use '$flux/css/mixin';
 
-@value basePane, basePaneElement from './base/Pane.module.scss';
-
 .notice {
-    composes: basePaneElement;
+    composes: basePaneElement from './base/Pane.module.scss';
 
     display: flex;
     padding: 12px 15px;
@@ -110,12 +108,12 @@
 .noticeGray {
     composes: notice;
 
-    background: rgb(var(--gray-2));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-1);
+    border-color: var(--gray-2);
     color: var(--foreground);
 
     .noticeClose {
-        background: rgb(var(--gray-3));
+        background: var(--gray-3);
     }
 
     .noticePrefix,
@@ -127,154 +125,154 @@
 .noticePrimary {
     composes: notice;
 
-    background: rgb(var(--primary-2));
-    border-color: rgb(var(--primary-3));
-    color: rgb(var(--primary-11));
+    background: var(--primary-2);
+    border-color: var(--primary-3);
+    color: var(--primary-11);
 
     .noticeClose {
-        background: rgb(var(--primary-3));
+        background: var(--primary-3);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--primary-7));
+        color: var(--primary-7);
     }
 
     :local(.button) {
-        border-color: rgb(var(--primary-4));
+        border-color: var(--primary-4);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--primary-3));
+        stroke: var(--primary-3);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--primary-7));
+        stroke: var(--primary-7);
     }
 }
 
 .noticeDanger {
     composes: notice;
 
-    background: rgb(var(--danger-2));
-    border-color: rgb(var(--danger-3));
-    color: rgb(var(--danger-11));
+    background: var(--danger-2);
+    border-color: var(--danger-3);
+    color: var(--danger-11);
 
     .noticeClose {
-        background: rgb(var(--danger-3));
+        background: var(--danger-3);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--danger-7));
+        color: var(--danger-7);
     }
 
     :local(.button) {
-        border-color: rgb(var(--danger-4));
+        border-color: var(--danger-4);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--danger-3));
+        stroke: var(--danger-3);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--danger-7));
+        stroke: var(--danger-7);
     }
 }
 
 .noticeInfo {
     composes: notice;
 
-    background: rgb(var(--info-2));
-    border-color: rgb(var(--info-3));
-    color: rgb(var(--info-11));
+    background: var(--info-2);
+    border-color: var(--info-3);
+    color: var(--info-11);
 
     .noticeClose {
-        background: rgb(var(--info-3));
+        background: var(--info-3);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--info-7));
+        color: var(--info-7);
     }
 
     :local(.button) {
-        border-color: rgb(var(--info-4));
+        border-color: var(--info-4);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--info-3));
+        stroke: var(--info-3);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--info-7));
+        stroke: var(--info-7);
     }
 }
 
 .noticeSuccess {
     composes: notice;
 
-    background: rgb(var(--success-2));
-    border-color: rgb(var(--success-3));
-    color: rgb(var(--success-11));
+    background: var(--success-2);
+    border-color: var(--success-3);
+    color: var(--success-11);
 
     .noticeClose {
-        background: rgb(var(--success-3));
+        background: var(--success-3);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--success-7));
+        color: var(--success-7);
     }
 
     :local(.button) {
-        border-color: rgb(var(--success-4));
+        border-color: var(--success-4);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--success-3));
+        stroke: var(--success-3);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--success-7));
+        stroke: var(--success-7);
     }
 }
 
 .noticeWarning {
     composes: notice;
 
-    background: rgb(var(--warning-2));
-    border-color: rgb(var(--warning-3));
-    color: rgb(var(--warning-11));
+    background: var(--warning-2);
+    border-color: var(--warning-3);
+    color: var(--warning-11);
 
     .noticeClose {
-        background: rgb(var(--warning-3));
+        background: var(--warning-3);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--warning-7));
+        color: var(--warning-7);
     }
 
     :local(.button) {
-        border-color: rgb(var(--warning-4));
+        border-color: var(--warning-4);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--warning-3));
+        stroke: var(--warning-3);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--warning-7));
+        stroke: var(--warning-7);
     }
 }
 
-:local(.basePane) > .notice {
+.basePane > .notice {
     padding-left: 21px;
     padding-right: 21px;
 }

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

@@ -1,12 +1,37 @@
+.overlayView {
+    position: fixed;
+    inset: 0;
+    height: 100dvh;
+    width: 100dvw;
+}
+
+.overlayProvider {
+    composes: overlayView;
+
+    pointer-events: none;
+    z-index: 10000;
+}
+
+.overlayShade {
+    composes: overlayView;
+
+    background: var(--overlay);
+    backdrop-filter: blur(3px) saturate(180%);
+    pointer-events: none;
+    transition: opacity 600ms var(--swift-out);
+}
+
+.overlayProvider:not(:has(.overlay:not(.overlayTransitionLeaveActive))) .overlayShade {
+    opacity: 0;
+}
+
 .overlay {
     position: fixed;
     display: flex;
     inset: 0;
     height: 100dvh;
     width: 100dvw;
-    background: rgb(var(--gray-3) / .5);
-    backdrop-filter: blur(3px) saturate(180%);
-    z-index: 10000;
+    outline: 0;
 
     > .basePaneStructure {
         display: flex;
@@ -16,12 +41,39 @@
         flex-flow: column nowrap;
         box-shadow: var(--shadow-lg);
         overflow: auto;
+        transition: 420ms var(--swift-out);
+        transition-property: filter, scale;
 
         .paneFooter {
             position: sticky;
             bottom: 0;
             margin-top: auto;
         }
+
+        &::after {
+            position: absolute;
+            display: block;
+            inset: 0;
+            content: '';
+            background: var(--overlay-secondary);
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 420ms var(--swift-out);
+            z-index: 1;
+        }
+    }
+
+    &.isCurrent > .basePaneStructure {
+        pointer-events: auto;
+    }
+
+    &:not(.isCurrent) > .basePaneStructure {
+        filter: blur(3px);
+        scale: .95;
+
+        &::after {
+            opacity: 1;
+        }
     }
 }
 
@@ -70,7 +122,7 @@
         > .paneHeader {
             top: 0;
             padding-bottom: 21px;
-            border-bottom: 1px solid rgb(var(--gray-2));
+            border-bottom: 1px solid var(--gray-1);
             box-shadow: var(--shadow-xs);
 
             &:has(+ :where(.tabs, .tabBar)) {