@flux-ui/components 3.0.0-next.3 → 3.0.0-next.31

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

@@ -0,0 +1,74 @@
+@use '$flux/css/mixin';
+
+.item {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 21px;
+    text-align: left;
+}
+
+.itemActions {
+    flex-shrink: 0;
+}
+
+.itemContent {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    gap: 3px;
+}
+
+.itemMedia {
+    --size: 48px;
+
+    flex-shrink: 0;
+}
+
+.itemMedia > img {
+    height: var(--size);
+    width: var(--size);
+    object-fit: cover;
+    object-position: center;
+}
+
+.itemMedia > .avatar {
+    font-size: var(--size);
+}
+
+.itemMedia > .icon {
+    margin: 1px;
+    font-size: 20px;
+}
+
+.itemMedia > .iconBoxed {
+    font-size: var(--size);
+}
+
+.itemActions.isCenter,
+.itemContent.isCenter,
+.itemMedia.isCenter {
+    align-self: center;
+}
+
+.itemStack {
+    position: relative;
+
+    .item + .item {
+        margin-top: 21px;
+        padding-top: 21px;
+        border-top: 1px solid var(--surface-stroke);
+    }
+}
+
+.basePaneStructure > .item,
+.basePaneStructure > .itemStack > .item {
+    padding: 21px;
+}
+
+.basePaneStructure > .itemStack > .item {
+    margin: 0;
+}
+
+.basePaneStructure:is(a, button):hover:has(> .item) {
+    background-color: color-mix(in srgb, rgb(from var(--surface-hover) r g b / .125), var(--surface));
+}

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

@@ -5,8 +5,11 @@
     flex-shrink: 0;
 
     > * {
+        position: absolute;
         height: 100%;
         width: 100%;
+        object-fit: cover;
+        object-position: center;
     }
 }
 

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

@@ -50,18 +50,25 @@
     text-align: left;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
+        background: var(--gray-200);
+    }
+
+    :local(.badge):last-child {
+        margin-right: -6px;
     }
 }
 
 .menuItemIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
+    margin-left: 2px;
+    margin-right: 2px;
     color: var(--foreground-prominent);
+    font-size: 16px;
 }
 
 .menuItemLabel {
@@ -79,58 +86,50 @@
 }
 
 .menuItemActive {
-    background: rgb(var(--primary-7));
-    color: rgb(var(--primary-1));
+    background: var(--primary-600);
+    color: var(--primary-50);
 
     .menuItemIcon {
-        color: rgb(var(--primary-0));
+        color: var(--primary-25);
     }
 
     @include mixin.hover {
-        background: rgb(var(--primary-7));
+        background: var(--primary-600);
     }
 
     &:active {
-        background: rgb(var(--primary-7));
+        background: var(--primary-600);
     }
 }
 
 .menuItemDestructive {
     .menuItemIcon {
-        color: rgb(var(--danger-8));
+        color: var(--danger-700);
     }
 
     .menuItemLabel {
-        color: rgb(var(--danger-8));
+        color: var(--danger-700);
     }
 }
 
 .menuItemHighlighted {
-    background: rgb(var(--primary-2));
-    color: rgb(var(--primary-7));
+    background: var(--primary-100);
+    color: var(--primary-600);
 
     .menuItemIcon {
-        color: rgb(var(--primary-8));
+        color: var(--primary-700);
     }
 
     @include mixin.hover {
-        background: rgb(var(--primary-2));
+        background: var(--primary-100);
     }
 
     &:active {
-        background: rgb(var(--primary-2));
+        background: var(--primary-100);
     }
-}
-
-[dark] .menuItemHighlighted {
-    background: rgb(var(--primary-11) / .5);
 
-    @include mixin.hover {
-        background: rgb(var(--primary-11) / .5);
-    }
-
-    &:active {
-        background: rgb(var(--primary-11) / .5);
+    :local(.badge) {
+        --surface-stroke: var(--primary-200);
     }
 }
 
@@ -143,7 +142,7 @@
 }
 
 .menuItemSelected .menuItemSelectableIcon {
-    color: rgb(var(--primary-7));
+    color: var(--primary-600);
 }
 
 .menuItemCommand {
@@ -171,7 +170,7 @@
 
 .menuItemActive .menuItemCommand,
 .menuItemActive .menuItemCommandIcon {
-    color: rgb(var(--primary-4));
+    color: var(--primary-300);
 }
 
 .menuItemImage {
@@ -207,7 +206,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(--surface) 75%, transparent);
     font-size: 14px;
     pointer-events: none;
     z-index: 1;
@@ -243,7 +242,7 @@
         bottom: 12px;
         width: 4px;
         content: '';
-        background: rgb(var(--primary-7));
+        background: var(--primary-600);
         border-radius: 99px;
         opacity: 0;
         transition: opacity 180ms var(--swift-out);
@@ -254,7 +253,7 @@
     min-height: 48px;
 
     &::after {
-        background: rgb(var(--primary-0));
+        background: var(--primary-25);
     }
 }
 
@@ -264,7 +263,7 @@
     }
 
     &.menuItemIndented {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
 
         .menuItemIcon,
         .menuItemLabel {

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

@@ -108,12 +108,12 @@
 .noticeGray {
     composes: notice;
 
-    background: rgb(var(--gray-2));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-50);
+    border-color: var(--gray-200);
     color: var(--foreground);
 
     .noticeClose {
-        background: rgb(var(--gray-3));
+        background: var(--gray-200);
     }
 
     .noticePrefix,
@@ -125,150 +125,150 @@
 .noticePrimary {
     composes: notice;
 
-    background: rgb(var(--primary-2));
-    border-color: rgb(var(--primary-3));
-    color: rgb(var(--primary-11));
+    background: var(--primary-100);
+    border-color: var(--primary-200);
+    color: var(--primary-950);
 
     .noticeClose {
-        background: rgb(var(--primary-3));
+        background: var(--primary-200);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--primary-7));
+        color: var(--primary-600);
     }
 
     :local(.button) {
-        border-color: rgb(var(--primary-4));
+        border-color: var(--primary-300);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--primary-3));
+        stroke: var(--primary-200);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--primary-7));
+        stroke: var(--primary-600);
     }
 }
 
 .noticeDanger {
     composes: notice;
 
-    background: rgb(var(--danger-2));
-    border-color: rgb(var(--danger-3));
-    color: rgb(var(--danger-11));
+    background: var(--danger-100);
+    border-color: var(--danger-200);
+    color: var(--danger-950);
 
     .noticeClose {
-        background: rgb(var(--danger-3));
+        background: var(--danger-200);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--danger-7));
+        color: var(--danger-600);
     }
 
     :local(.button) {
-        border-color: rgb(var(--danger-4));
+        border-color: var(--danger-300);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--danger-3));
+        stroke: var(--danger-200);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--danger-7));
+        stroke: var(--danger-600);
     }
 }
 
 .noticeInfo {
     composes: notice;
 
-    background: rgb(var(--info-2));
-    border-color: rgb(var(--info-3));
-    color: rgb(var(--info-11));
+    background: var(--info-100);
+    border-color: var(--info-200);
+    color: var(--info-950);
 
     .noticeClose {
-        background: rgb(var(--info-3));
+        background: var(--info-200);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--info-7));
+        color: var(--info-600);
     }
 
     :local(.button) {
-        border-color: rgb(var(--info-4));
+        border-color: var(--info-300);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--info-3));
+        stroke: var(--info-200);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--info-7));
+        stroke: var(--info-600);
     }
 }
 
 .noticeSuccess {
     composes: notice;
 
-    background: rgb(var(--success-2));
-    border-color: rgb(var(--success-3));
-    color: rgb(var(--success-11));
+    background: var(--success-100);
+    border-color: var(--success-200);
+    color: var(--success-950);
 
     .noticeClose {
-        background: rgb(var(--success-3));
+        background: var(--success-200);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--success-7));
+        color: var(--success-600);
     }
 
     :local(.button) {
-        border-color: rgb(var(--success-4));
+        border-color: var(--success-300);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--success-3));
+        stroke: var(--success-200);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--success-7));
+        stroke: var(--success-600);
     }
 }
 
 .noticeWarning {
     composes: notice;
 
-    background: rgb(var(--warning-2));
-    border-color: rgb(var(--warning-3));
-    color: rgb(var(--warning-11));
+    background: var(--warning-100);
+    border-color: var(--warning-200);
+    color: var(--warning-950);
 
     .noticeClose {
-        background: rgb(var(--warning-3));
+        background: var(--warning-200);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--warning-7));
+        color: var(--warning-600);
     }
 
     :local(.button) {
-        border-color: rgb(var(--warning-4));
+        border-color: var(--warning-300);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--warning-3));
+        stroke: var(--warning-200);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--warning-7));
+        stroke: var(--warning-600);
     }
 }
 

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

@@ -0,0 +1,41 @@
+.overflowBar {
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 2;
+    overflow: hidden;
+
+    &.alignStart {
+        justify-content: flex-start;
+    }
+
+    &.alignCenter {
+        justify-content: center;
+    }
+
+    &.alignEnd {
+        justify-content: flex-end;
+    }
+}
+
+.overflowBarHorizontal {
+    composes: overflowBar;
+
+    flex-flow: row nowrap;
+}
+
+.overflowBarVertical {
+    composes: overflowBar;
+
+    flex-flow: column nowrap;
+}
+
+.overflowBarMeasurer {
+    position: absolute;
+    overflow: hidden;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.overflowBarOverflow {
+    display: contents;
+}

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):not(.slideOverTransitionLeaveActive))) .overlayShade {
+    opacity: 0;
+}
+
 .overlay {
     position: fixed;
     display: flex;
     inset: 0;
     height: 100dvh;
     width: 100dvw;
-    background: rgb(var(--gray-8) / .5);
-    backdrop-filter: blur(3px) saturate(180%);
-    z-index: 10000;
+    outline: 0;
 
     > .basePaneStructure {
         display: flex;
@@ -16,17 +41,40 @@
         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;
     }
-}
 
-[dark] .overlay {
-    background: rgb(0 0 0 / .5);
+    &:not(.isCurrent) > .basePaneStructure {
+        filter: blur(3px);
+        scale: .95;
+
+        &::after {
+            opacity: 1;
+        }
+    }
 }
 
 .overlaySmall {
@@ -74,7 +122,7 @@
         > .paneHeader {
             top: 0;
             padding-bottom: 21px;
-            border-bottom: 1px solid rgb(var(--gray-2));
+            border-bottom: 1px solid var(--gray-100);
             box-shadow: var(--shadow-xs);
 
             &:has(+ :where(.tabs, .tabBar)) {