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

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

@@ -1,8 +1,5 @@
 @use '$flux/css/mixin';
 
-@value button, buttonLabel from './base/Button.module.scss';
-@value basePaneStructure from './base/Pane.module.scss';
-
 %-form-input-group-inner-styles {
     height: 100%;
     min-height: unset;
@@ -29,6 +26,7 @@
 
 .form {
     composes: formStructureElement;
+
     gap: 42px;
 }
 
@@ -40,13 +38,14 @@
 .formColumn,
 .formSection {
     composes: formStructureElement;
+
     gap: 18px;
 }
 
 .form,
 .formColumn,
 .formSection {
-    > :local(.button) {
+    > .button {
         align-self: flex-start;
     }
 }
@@ -63,6 +62,13 @@
     font-weight: 800;
 }
 
+@include mixin.breakpoint-down(sm) {
+    .formRow {
+        flex-flow: column;
+        gap: 18px;
+    }
+}
+
 .formField {
     display: flex;
     flex: 1 1 0;
@@ -106,12 +112,15 @@
 
 .formFieldAddition {
     display: flex;
+    margin-top: 3px;
+    margin-bottom: 3px;
     gap: 9px;
     font-size: 14px;
+    line-height: 24px;
 }
 
 .formFieldAdditionIcon {
-    margin-top: 3px;
+    margin-top: 4px;
 }
 
 .formFieldAdditionError {
@@ -126,6 +135,10 @@
     color: var(--foreground-secondary);
 }
 
+.formFieldAddition + .formFieldAddition {
+    margin-top: 0;
+}
+
 .formInput {
     position: relative;
     display: block;
@@ -283,25 +296,25 @@
 
     @include mixin.focus-ring(-1px, true);
 
-    > :is(.formInput, .formSelect, :local(.button)) {
+    > :is(.formInput, .formSelect, .button) {
         @extend %-form-input-group-inner-styles;
 
-        + :is(:local(.button), :local(.buttonGroup)) {
+        + :is(.button, .buttonGroup) {
             margin: 0;
             border-left: 1px solid rgb(var(--gray-3));
         }
     }
 
-    > :local(.buttonGroup) > :local(.button) {
+    > .buttonGroup > .button {
         @extend %-form-input-group-inner-styles;
 
-        + :local(.button) {
+        + .button {
             margin: 0;
             border-left: 1px solid rgb(var(--gray-3));
         }
     }
 
-    > :local(.buttonGroup):not(:first-child) > :local(.button):first-child {
+    > .buttonGroup:not(:first-child) > .button:first-child {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
     }
@@ -446,7 +459,7 @@
 }
 
 .formSelectPopup {
-    composes: basePaneStructure;
+    composes: basePaneStructure from './base/Pane.module.scss';
 
     position: fixed;
     display: block;
@@ -482,7 +495,7 @@
     inset: -1px;
     pointer-events: none;
 
-    :local(.buttonLabel) {
+    .buttonLabel {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -595,6 +608,7 @@
 }
 
 .quantitySelector {
+    min-width: max-content;
     align-self: center;
     justify-self: center;
     border: 1px solid rgb(var(--gray-3));

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

@@ -1,7 +1,5 @@
 @use '$flux/css/mixin';
 
-@value placeholder from './Placeholder.module.scss';
-
 .gallery {
     display: grid;
     gap: 9px;
@@ -9,7 +7,7 @@
 }
 
 .galleryAdd {
-    composes: placeholder;
+    composes: placeholder from './Placeholder.module.scss';
 
     aspect-ratio: 1 / 1;
     color: rgb(var(--gray-7));

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

@@ -1,104 +1,100 @@
-@value basePane from './base/Pane.module.scss';
-
-@layer flux-base {
-    .icon {
-        height: 1em;
-        width: 1em;
-        flex-shrink: 0;
-        font-size: 20px;
-        line-height: 1;
-    }
+.icon {
+    height: 1em;
+    width: 1em;
+    flex-shrink: 0;
+    font-size: 20px;
+    line-height: 1;
+}
 
-    .fontAwesomeIcon {
-        composes: icon;
+.fontAwesomeIcon {
+    composes: icon;
 
-        display: inline-block;
-    }
+    display: inline-block;
+}
 
-    .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;
-    }
+.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;
+}
 
-    .iconBoxed {
-        composes: basePane;
+.iconBoxed {
+    composes: basePane from './base/Pane.module.scss';
 
-        display: flex;
-        height: 1em;
-        width: 1em;
-        align-items: center;
-        flex-shrink: 0;
-        justify-content: center;
-        font-size: 42px;
+    display: flex;
+    height: 1em;
+    width: 1em;
+    align-items: center;
+    flex-shrink: 0;
+    justify-content: center;
+    font-size: 42px;
 
-        .icon {
-            font-size: .33em;
-        }
+    .icon {
+        font-size: .33em;
+    }
 
-        .materialSymbolIcon {
-            font-size: .5em;
-        }
+    .materialSymbolIcon {
+        font-size: .5em;
     }
+}
 
-    .iconBoxedDefault {
-        composes: iconBoxed;
+.iconBoxedDefault {
+    composes: iconBoxed;
 
-        box-shadow: var(--shadow-sm);
-    }
+    box-shadow: var(--shadow-sm);
+}
 
-    .iconBoxedColored {
-        composes: iconBoxed;
+.iconBoxedColored {
+    composes: iconBoxed;
 
-        border: 0;
-    }
+    border: 0;
+}
 
-    .iconBoxedGray {
-        composes: iconBoxedColored;
+.iconBoxedGray {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--gray-2));
-        color: var(--foreground);
-    }
+    background: rgb(var(--gray-2));
+    color: var(--foreground);
+}
 
-    .iconBoxedPrimary {
-        composes: iconBoxedColored;
+.iconBoxedPrimary {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--primary-2));
-        color: rgb(var(--primary-10));
-    }
+    background: rgb(var(--primary-2));
+    color: rgb(var(--primary-10));
+}
 
-    .iconBoxedDanger {
-        composes: iconBoxedColored;
+.iconBoxedDanger {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--danger-2));
-        color: rgb(var(--danger-10));
-    }
+    background: rgb(var(--danger-2));
+    color: rgb(var(--danger-10));
+}
 
-    .iconBoxedInfo {
-        composes: iconBoxedColored;
+.iconBoxedInfo {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--info-2));
-        color: rgb(var(--info-10));
-    }
+    background: rgb(var(--info-2));
+    color: rgb(var(--info-10));
+}
 
-    .iconBoxedSuccess {
-        composes: iconBoxedColored;
+.iconBoxedSuccess {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--success-2));
-        color: rgb(var(--success-10));
-    }
+    background: rgb(var(--success-2));
+    color: rgb(var(--success-10));
+}
 
-    .iconBoxedWarning {
-        composes: iconBoxedColored;
+.iconBoxedWarning {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--warning-2));
-        color: rgb(var(--warning-10));
-    }
+    background: rgb(var(--warning-2));
+    color: rgb(var(--warning-10));
 }

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;
@@ -62,13 +59,13 @@
 }
 
 .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;
@@ -89,10 +86,8 @@
         color: rgb(var(--primary-0));
     }
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-7));
-        }
+    @include mixin.hover {
+        background: rgb(var(--primary-7));
     }
 
     &:active {
@@ -118,10 +113,8 @@
         color: rgb(var(--primary-8));
     }
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-2));
-        }
+    @include mixin.hover {
+        background: rgb(var(--primary-2));
     }
 
     &:active {
@@ -132,10 +125,8 @@
 [dark] .menuItemHighlighted {
     background: rgb(var(--primary-11) / .5);
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-11) / .5);
-        }
+    @include mixin.hover {
+        background: rgb(var(--primary-11) / .5);
     }
 
     &:active {
@@ -148,7 +139,7 @@
 }
 
 .menuItemSelectableIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 }
 
 .menuItemSelected .menuItemSelectableIcon {
@@ -282,7 +273,7 @@
     }
 }
 
-:local(.basePane) > .menu {
+.basePane > .menu {
     margin-left: 9px;
     margin-right: 9px;
 
@@ -299,7 +290,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;
@@ -54,6 +52,7 @@
     margin: 2px;
     padding: 0;
     align-items: center;
+    flex-shrink: 0;
     justify-content: center;
     border: 0;
     border-radius: 12px;
@@ -273,7 +272,7 @@
     }
 }
 
-:local(.basePane) > .notice {
+.basePane > .notice {
     padding-left: 21px;
     padding-right: 21px;
 }

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

@@ -4,7 +4,7 @@
     inset: 0;
     height: 100dvh;
     width: 100dvw;
-    background: rgb(var(--gray-3) / .5);
+    background: rgb(var(--gray-8) / .5);
     backdrop-filter: blur(3px) saturate(180%);
     z-index: 10000;
 
@@ -25,6 +25,10 @@
     }
 }
 
+[dark] .overlay {
+    background: rgb(0 0 0 / .5);
+}
+
 .overlaySmall {
     composes: overlay;