@flux-ui/components 3.0.0-next.4 → 3.0.0-next.41

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

@@ -1,47 +1,33 @@
-.icon {
-    height: 1em;
-    width: 1em;
-    flex-shrink: 0;
-    font-size: 20px;
-    line-height: 1;
-}
-
-.fontAwesomeIcon {
-    composes: icon;
-
-    display: inline-block;
-}
+@layer flux-base {
+    .icon {
+        height: 1em;
+        width: 1em;
+        flex-shrink: 0;
+        font-size: 20px;
+        line-height: 1;
+        overflow: visible;
+    }
 
-.materialSymbolIcon {
-    composes: icon;
-
-    display: inline-flex;
-    color: currentColor;
-    font-family: 'Material Symbols Outlined', sans-serif;
-    font-weight: 400;
-    font-style: normal;
-    user-select: none;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-}
+    .fontAwesomeIcon {
+        composes: icon;
 
-.iconBoxed {
-    composes: basePane from './base/Pane.module.scss';
+        display: inline-block;
+    }
 
-    display: flex;
-    height: 1em;
-    width: 1em;
-    align-items: center;
-    flex-shrink: 0;
-    justify-content: center;
-    font-size: 42px;
+    .iconBoxed {
+        composes: basePane from './base/Pane.module.scss';
 
-    .icon {
-        font-size: .33em;
-    }
+        display: flex;
+        height: 1em;
+        width: 1em;
+        align-items: center;
+        flex-shrink: 0;
+        justify-content: center;
+        font-size: 42px;
 
-    .materialSymbolIcon {
-        font-size: .5em;
+        .icon {
+            font-size: .45em;
+        }
     }
 }
 
@@ -60,41 +46,41 @@
 .iconBoxedGray {
     composes: iconBoxedColored;
 
-    background: rgb(var(--gray-2));
+    background: var(--gray-100);
     color: var(--foreground);
 }
 
 .iconBoxedPrimary {
     composes: iconBoxedColored;
 
-    background: rgb(var(--primary-2));
-    color: rgb(var(--primary-10));
+    background: var(--primary-100);
+    color: var(--primary-900);
 }
 
 .iconBoxedDanger {
     composes: iconBoxedColored;
 
-    background: rgb(var(--danger-2));
-    color: rgb(var(--danger-10));
+    background: var(--danger-100);
+    color: var(--danger-900);
 }
 
 .iconBoxedInfo {
     composes: iconBoxedColored;
 
-    background: rgb(var(--info-2));
-    color: rgb(var(--info-10));
+    background: var(--info-100);
+    color: var(--info-900);
 }
 
 .iconBoxedSuccess {
     composes: iconBoxedColored;
 
-    background: rgb(var(--success-2));
-    color: rgb(var(--success-10));
+    background: var(--success-100);
+    color: var(--success-900);
 }
 
 .iconBoxedWarning {
     composes: iconBoxedColored;
 
-    background: rgb(var(--warning-2));
-    color: rgb(var(--warning-10));
+    background: var(--warning-100);
+    color: var(--warning-900);
 }

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

@@ -3,13 +3,12 @@
     gap: 15px;
 
     > .icon {
-        margin-top: 1px;
+        margin-top: 3px;
         flex-shrink: 0;
-        color: rgb(var(--primary-7));
+        color: var(--primary-600);
     }
 }
 
 .infoBody {
     align-items: center;
-    line-height: 1.5;
 }

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

@@ -0,0 +1,74 @@
+@use '$flux/css/mixin';
+
+.item {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 18px;
+    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: 18px;
+        padding-top: 18px;
+        border-top: 1px solid var(--surface-stroke);
+    }
+}
+
+.basePaneStructure > .item,
+.basePaneStructure > .itemStack > .item {
+    padding: 18px;
+}
+
+.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/LayerPane.module.scss

@@ -0,0 +1,40 @@
+.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;
+}
+
+.layerPane > .basePaneStructure {
+    border-right-width: 0;
+    border-left-width: 0;
+}
+
+.layerPane > .basePaneStructure:first-child {
+    border-top-width: 0;
+}
+
+.layerPane > .basePaneStructure:last-child {
+    border-bottom-width: 0;
+}
+
+.layerPane > .basePaneStructure + .basePaneStructure {
+    border-top-width: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.layerPane > .basePaneStructure:has(+ .basePaneStructure) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.layerPaneSecondary {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 12px 18px;
+    color: var(--foreground-prominent);
+}

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

@@ -5,15 +5,14 @@
     flex-shrink: 0;
 
     > * {
+        position: absolute;
         height: 100%;
         width: 100%;
+        object-fit: cover;
+        object-position: center;
     }
 }
 
-.autoGrid {
-    composes: baseAutoGrid from './base/Grid.module.scss';
-}
-
 .container {
     margin-left: auto;
     margin-right: auto;
@@ -24,6 +23,17 @@
     @include mixin.breakpoint-max-widths;
 }
 
+.column {
+    display: flex;
+    flex-flow: column;
+    gap: var(--gap, 0);
+}
+
+.row {
+    display: flex;
+    gap: var(--gap, 0);
+}
+
 .spacer {
     flex-grow: 1;
 }

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

@@ -1,7 +1,7 @@
 .legendHorizontal {
     composes: stackHorizontal from './Layout.module.scss';
 
-    gap: 12px 21px;
+    gap: 12px 18px;
 }
 
 .legendVertical {
@@ -25,6 +25,6 @@
         content: '';
         flex: 0 0 12px;
         background: var(--color);
-        border-radius: 99px;
+        border-radius: var(--radius-full);
     }
 }

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

@@ -41,7 +41,6 @@
 
     height: unset;
     min-height: 42px;
-    padding: 6px 12px;
     gap: 15px;
     justify-content: flex-start;
     border: 0;
@@ -50,18 +49,20 @@
     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';
-
-    color: var(--foreground-prominent);
 }
 
 .menuItemLabel {
@@ -79,63 +80,104 @@
 }
 
 .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);
     }
+
+    :local(.badge) {
+        --surface-stroke: var(--primary-200);
+    }
+}
+
+.menuItemIndented {
+    margin-left: 33px;
 }
 
-[dark] .menuItemHighlighted {
-    background: rgb(var(--primary-11) / .5);
+.menuCollapsible {
+    display: flex;
+    flex-flow: column;
+}
 
-    @include mixin.hover {
-        background: rgb(var(--primary-11) / .5);
+.menuCollapsibleOpened {
+    composes: menuCollapsible;
+}
+
+.menuCollapsibleBody {
+    position: relative;
+    min-height: 0;
+    transition: height 300ms var(--swift-out), opacity 200ms var(--swift-out);
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 3px;
+        bottom: 3px;
+        left: 21px;
+        width: 2px;
+        background: var(--surface-stroke);
     }
 
-    &:active {
-        background: rgb(var(--primary-11) / .5);
+    &:global(.v-enter-from),
+    &:global(.v-leave-to) {
+        opacity: 0;
+    }
+
+    &:global(.v-enter-to),
+    &:global(.v-leave-from) {
+        opacity: 1;
+    }
+
+    &:global(.v-enter-active),
+    &:global(.v-leave-active) {
+        overflow: hidden;
     }
 }
 
-.menuItemIndented {
-    margin-left: 33px;
+.menuCollapsibleContent {
+    display: flex;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    padding-left: 35px;
+    flex-flow: column;
+    gap: 3px;
 }
 
 .menuItemSelectableIcon {
@@ -143,7 +185,7 @@
 }
 
 .menuItemSelected .menuItemSelectableIcon {
-    color: rgb(var(--primary-7));
+    color: var(--primary-600);
 }
 
 .menuItemCommand {
@@ -171,7 +213,7 @@
 
 .menuItemActive .menuItemCommand,
 .menuItemActive .menuItemCommandIcon {
-    color: rgb(var(--primary-4));
+    color: var(--primary-300);
 }
 
 .menuItemImage {
@@ -182,6 +224,11 @@
     border-radius: 3px;
 }
 
+.menuItem :local(.avatar) {
+    margin: -3px;
+    font-size: 24px;
+}
+
 .menuGroupHorizontal .menuItem {
     flex-basis: 0;
     flex-grow: 1;
@@ -207,8 +254,7 @@
     padding: 12px 12px 6px;
     align-items: center;
     gap: 9px;
-    background: linear-gradient(to bottom, rgb(var(--gray-0)) 75%, transparent);
-    font-size: 14px;
+    background: linear-gradient(to bottom, var(--surface) 75%, transparent);
     pointer-events: none;
     z-index: 1;
 }
@@ -224,6 +270,7 @@
 
 .menuSubHeaderLabel {
     flex-grow: 1;
+    font-size: 14px;
 }
 
 .menuItem + .menuSubHeader {
@@ -243,10 +290,10 @@
         bottom: 12px;
         width: 4px;
         content: '';
-        background: rgb(var(--primary-7));
-        border-radius: 99px;
+        background: var(--primary-600);
+        border-radius: var(--radius-full);
         opacity: 0;
-        transition: opacity 180ms var(--swift-out);
+        transition: opacity var(--transition-default);
     }
 }
 
@@ -254,7 +301,7 @@
     min-height: 48px;
 
     &::after {
-        background: rgb(var(--primary-0));
+        background: var(--primary-25);
     }
 }
 
@@ -264,7 +311,7 @@
     }
 
     &.menuItemIndented {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
 
         .menuItemIcon,
         .menuItemLabel {
@@ -299,7 +346,7 @@
     }
 
     > :where(.divider, .separator) {
-        margin-left: 21px;
-        margin-right: 21px;
+        margin-left: 18px;
+        margin-right: 18px;
     }
 }