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

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

@@ -1,5 +1,3 @@
-@value basePaneStructure from './base/Pane.module.scss';
-
 .filter {
     max-height: 50dvh;
     max-width: 100%;
@@ -47,8 +45,8 @@
     margin: -9px -9px 3px;
     padding: 9px;
     top: -9px;
-    background: rgb(var(--gray-0));
-    border-bottom: 1px solid rgb(var(--gray-2));
+    background: var(--gray-0);
+    border-bottom: 1px solid var(--gray-2);
     z-index: 2;
 
     &:first-child {
@@ -75,6 +73,6 @@
     top: 52px;
     margin: -9px -9px 0;
     padding: 9px;
-    background: linear-gradient(to bottom, rgb(var(--gray-0)) 75%, transparent);
+    background: linear-gradient(to bottom, var(--gray-0) 75%, transparent);
     z-index: 1;
 }

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,18 +112,21 @@
 
 .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 {
     composes: formFieldAddition;
 
-    color: rgb(var(--danger-7));
+    color: var(--danger-7);
 }
 
 .formFieldAdditionHint {
@@ -126,6 +135,10 @@
     color: var(--foreground-secondary);
 }
 
+.formFieldAddition + .formFieldAddition {
+    margin-top: 0;
+}
+
 .formInput {
     position: relative;
     display: block;
@@ -133,9 +146,9 @@
     width: 100%;
     padding: 0 12px;
     align-self: start;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
     background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--gray-2);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     color: var(--foreground);
@@ -147,7 +160,7 @@
     }
 
     &.isSecondary {
-        background: rgb(var(--gray-2));
+        background: var(--gray-1);
         border-color: transparent;
         box-shadow: none;
     }
@@ -156,7 +169,7 @@
 .formInputDisabled {
     composes: formInput;
 
-    background: rgb(var(--gray-2));
+    background: var(--gray-2);
     cursor: not-allowed;
 
     input {
@@ -170,7 +183,7 @@
     @include mixin.focus-ring(-1px, true);
 
     @include mixin.hover {
-        border-color: rgb(var(--gray-4));
+        border-color: var(--gray-3);
     }
 }
 
@@ -258,20 +271,20 @@
     align-items: center;
     flex-grow: 0;
     justify-content: center;
-    background: rgb(var(--gray-1));
+    background: var(--gray-1);
     color: var(--foreground-secondary);
     pointer-events: none;
 
     &:has(+ .formInput .formInputNative) {
-        border-right: 1px solid rgb(var(--gray-3));
+        border-right: 1px solid var(--gray-2);
     }
 
     + .formInputAddition {
-        border-left: 1px solid rgb(var(--gray-3));
+        border-left: 1px solid var(--gray-2);
     }
 
     @at-root .formInput:has(.formInputNative) + & {
-        border-left: 1px solid rgb(var(--gray-3));
+        border-left: 1px solid var(--gray-2);
     }
 }
 
@@ -283,29 +296,38 @@
 
     @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));
+            border-left: 1px solid var(--gray-2);
         }
     }
 
-    > :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));
+            border-left: 1px solid var(--gray-2);
         }
     }
 
-    > :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;
     }
 
+    &.isCondensed,
+    &.isSecondary {
+        .formInputAddition:not(:last-child) {
+            padding-right: 0;
+            background: unset;
+            border-color: transparent;
+        }
+    }
+
     &.isSecondary {
         .formInput {
             background: transparent;
@@ -313,17 +335,13 @@
             box-shadow: none;
         }
 
-        .formInputAddition:not(:last-child) {
-            padding-right: 0;
-        }
-
         .secondaryButton {
             background: transparent;
-            border-color: rgb(var(--gray-3));
+            border-color: var(--gray-2);
             box-shadow: none;
 
             @include mixin.hover {
-                background: rgb(var(--gray-3));
+                background: var(--gray-3);
             }
         }
     }
@@ -385,7 +403,7 @@
         @include mixin.focus-ring(-1px, true);
 
         @include mixin.hover {
-            border-color: rgb(var(--gray-4));
+            border-color: var(--gray-4);
         }
     }
 
@@ -417,7 +435,7 @@
     top: 0;
     height: 48px;
     margin-bottom: 9px;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
     border-top: 0;
     border-left: 0;
     border-right: 0;
@@ -446,7 +464,7 @@
 }
 
 .formSelectPopup {
-    composes: basePaneStructure;
+    composes: basePane from './base/Pane.module.scss';
 
     position: fixed;
     display: block;
@@ -482,7 +500,7 @@
     inset: -1px;
     pointer-events: none;
 
-    :local(.buttonLabel) {
+    .buttonLabel {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -494,8 +512,8 @@
 }
 
 .isDisabled .formSelectSelected {
-    background: rgb(var(--gray-2));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--gray-2);
+    border: 1px solid var(--gray-3);
     color: var(--foreground-secondary);
     opacity: 1;
 }
@@ -543,10 +561,10 @@
     padding: 0;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-3));
+    background: var(--gray-2);
     border: 0;
     border-radius: calc(var(--radius) / 2);
-    color: rgb(var(--primary-0));
+    color: var(--primary-0);
     cursor: pointer;
     pointer-events: none;
     transition: 210ms var(--swift-out);
@@ -577,12 +595,12 @@
 
     @include mixin.hover {
         + .checkboxElement {
-            background: rgb(var(--gray-4));
+            background: var(--gray-3);
         }
     }
 
     &:is(:checked, :indeterminate) + .checkboxElement {
-        background: rgb(var(--primary-7));
+        background: var(--primary-7);
 
         .icon {
             opacity: 1;
@@ -595,9 +613,10 @@
 }
 
 .quantitySelector {
+    min-width: max-content;
     align-self: center;
     justify-self: center;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--gray-2);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     overflow: hidden;
@@ -605,7 +624,7 @@
     @include mixin.focus-ring-transition(2px, true);
 
     @include mixin.hover {
-        border-color: rgb(var(--gray-4));
+        border-color: var(--gray-3);
     }
 }
 
@@ -640,7 +659,7 @@
     text-align: center;
 
     &:hover {
-        border-color: rgb(var(--gray-3));
+        border-color: var(--gray-3);
     }
 
     &,
@@ -676,7 +695,7 @@
     padding: 0;
     width: 2.7ch;
     background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--gray-3);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     font: inherit;
@@ -691,7 +710,7 @@
     composes: pinInput;
 
     .pinInputField {
-        background-color: rgb(var(--gray-0));
+        background-color: var(--gray-0);
         color: var(--foreground-prominent);
 
         @include mixin.focus-ring(-1px, true);
@@ -702,7 +721,7 @@
     composes: pinInput;
 
     .pinInputField {
-        background-color: rgb(var(--gray-2));
+        background-color: var(--gray-2);
         color: var(--foreground-secondary);
         cursor: not-allowed;
     }
@@ -714,7 +733,7 @@
     width: 54px;
     height: 30px;
     flex: 0 0 auto;
-    background: rgb(var(--gray-2));
+    background: var(--gray-2);
     border-radius: 99px;
     contain: paint;
 
@@ -724,10 +743,10 @@
         }
 
         &:not(.isSwitch) {
-            background: rgb(var(--primary-7));
+            background: var(--primary-7);
 
             .toggleIcon {
-                color: rgb(var(--primary-0));
+                color: var(--primary-0);
             }
 
             .toggleInput::after {
@@ -795,9 +814,9 @@
         height: 24px;
         width: 24px;
         content: '';
-        background: rgb(var(--gray-0));
+        background: var(--gray-0);
         background-clip: padding-box;
-        border: 1px solid rgb(var(--gray-3));
+        border: 1px solid var(--gray-3);
         border-radius: 99px;
         box-shadow: var(--shadow-sm);
     }

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

@@ -1,22 +1,30 @@
 @use '$flux/css/mixin';
 
-@value placeholder from './Placeholder.module.scss';
-
 .gallery {
+    --dz-fill: transparent;
+    --dz-stroke: transparent;
+    --dz-inset: -3px;
+    --dz-radius: calc(var(--radius) + 3px);
+    --dz-height: calc(100% + 6px);
+    --dz-width: calc(100% + 6px);
+}
+
+.galleryGrid {
     display: grid;
     gap: 9px;
     grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
 }
 
 .galleryAdd {
-    composes: placeholder;
+    composes: placeholder from './Placeholder.module.scss';
 
+    position: relative;
     aspect-ratio: 1 / 1;
-    color: rgb(var(--gray-7));
+    color: var(--gray-7);
 
     @include mixin.hover {
-        background: rgb(var(--gray-1));
-        border-color: rgb(var(--gray-3));
+        background: var(--gray-2);
+        border-color: var(--gray-3);
     }
 }
 

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

@@ -1,104 +1,101 @@
-@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;
+    overflow: visible;
+}
 
-    .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: var(--gray-2);
+    color: var(--foreground);
+}
 
-    .iconBoxedPrimary {
-        composes: iconBoxedColored;
+.iconBoxedPrimary {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--primary-2));
-        color: rgb(var(--primary-10));
-    }
+    background: var(--primary-2);
+    color: var(--primary-10);
+}
 
-    .iconBoxedDanger {
-        composes: iconBoxedColored;
+.iconBoxedDanger {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--danger-2));
-        color: rgb(var(--danger-10));
-    }
+    background: var(--danger-2);
+    color: var(--danger-10);
+}
 
-    .iconBoxedInfo {
-        composes: iconBoxedColored;
+.iconBoxedInfo {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--info-2));
-        color: rgb(var(--info-10));
-    }
+    background: var(--info-2);
+    color: var(--info-10);
+}
 
-    .iconBoxedSuccess {
-        composes: iconBoxedColored;
+.iconBoxedSuccess {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--success-2));
-        color: rgb(var(--success-10));
-    }
+    background: var(--success-2);
+    color: var(--success-10);
+}
 
-    .iconBoxedWarning {
-        composes: iconBoxedColored;
+.iconBoxedWarning {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--warning-2));
-        color: rgb(var(--warning-10));
-    }
+    background: var(--warning-2);
+    color: var(--warning-10);
 }

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

@@ -5,7 +5,7 @@
     > .icon {
         margin-top: 1px;
         flex-shrink: 0;
-        color: rgb(var(--primary-7));
+        color: var(--primary-7);
     }
 }