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

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

@@ -2,7 +2,7 @@
     max-height: 50dvh;
     max-width: 100%;
     padding: 9px;
-    width: 330px;
+    width: 270px;
     overflow: auto;
     scrollbar-width: none;
     transition: height 150ms var(--deceleration-curve);
@@ -40,13 +40,39 @@
     }
 }
 
+.filterBadge {
+    padding-left: 6px;
+    padding-right: 6px;
+    background: var(--primary-50);
+    border: 1px dashed var(--primary-300);
+    font-weight: 500;
+
+    :local(.badgeLabel) {
+        color: var(--primary-900);
+    }
+}
+
+.filterButton {
+    border: 1px solid var(--surface-stroke);
+    box-shadow: none;
+
+    :local(.badge) {
+        border-radius: var(--radius-half);
+    }
+
+    :local(.buttonIcon) {
+        color: var(--primary-700);
+        font-size: 16px;
+    }
+}
+
 .filterHeader {
     position: sticky;
     margin: -9px -9px 3px;
     padding: 9px;
     top: -9px;
-    background: rgb(var(--gray-0));
-    border-bottom: 1px solid rgb(var(--gray-2));
+    background: var(--surface);
+    border-bottom: 1px solid var(--surface-stroke);
     z-index: 2;
 
     &:first-child {
@@ -70,9 +96,23 @@
 
 .filterSearch {
     position: sticky;
-    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(--surface) 75%, transparent);
     z-index: 1;
 }
+
+.filterHeader + .menuGroup .filterSearch {
+    top: 52px;
+}
+
+.filterBar {
+    display: flex;
+    flex-flow: row nowrap;
+    flex-grow: 1;
+    gap: 15px;
+}
+
+.filterBarSearch {
+    max-width: 300px;
+}

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

@@ -6,7 +6,7 @@
     top: var(--pane-y);
     left: var(--pane-x);
     margin: 0;
-    padding: 12px;
+    padding: 24px;
     background: unset;
     border: 0;
     font-size: 1rem;

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

@@ -50,10 +50,18 @@
     }
 }
 
+.formGrid {
+    --columns: 2;
+
+    display: grid;
+    gap: 18px;
+    grid-template-columns: repeat(var(--columns), 1fr);
+}
+
 .formRow {
     display: flex;
     flex-grow: 1;
-    gap: 12px;
+    gap: 18px;
 }
 
 .formSectionTitle {
@@ -63,6 +71,10 @@
 }
 
 @include mixin.breakpoint-down(sm) {
+    .formGrid {
+        grid-template-columns: 1fr;
+    }
+
     .formRow {
         flex-flow: column;
         gap: 18px;
@@ -126,7 +138,7 @@
 .formFieldAdditionError {
     composes: formFieldAddition;
 
-    color: rgb(var(--danger-7));
+    color: var(--danger-600);
 }
 
 .formFieldAdditionHint {
@@ -146,9 +158,9 @@
     width: 100%;
     padding: 0 12px;
     align-self: start;
-    background: rgb(var(--gray-0));
+    background: var(--surface);
     background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--surface-stroke);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     color: var(--foreground);
@@ -160,7 +172,7 @@
     }
 
     &.isSecondary {
-        background: rgb(var(--gray-2));
+        background: var(--background);
         border-color: transparent;
         box-shadow: none;
     }
@@ -169,7 +181,8 @@
 .formInputDisabled {
     composes: formInput;
 
-    background: rgb(var(--gray-2));
+    background: var(--surface-disabled);
+    color: var(--foreground-secondary);
     cursor: not-allowed;
 
     input {
@@ -183,7 +196,7 @@
     @include mixin.focus-ring(-1px, true);
 
     @include mixin.hover {
-        border-color: rgb(var(--gray-4));
+        border-color: var(--surface-stroke-hover);
     }
 }
 
@@ -245,7 +258,7 @@
 
     &::-webkit-color-swatch {
         border: 0;
-        border-radius: calc(var(--radius) / 2);
+        border-radius: var(--radius-half);
     }
 
     &::-webkit-color-swatch-wrapper {
@@ -271,25 +284,25 @@
     align-items: center;
     flex-grow: 0;
     justify-content: center;
-    background: rgb(var(--gray-1));
+    background: var(--surface-disabled);
     color: var(--foreground-secondary);
     pointer-events: none;
 
     &:has(+ .formInput .formInputNative) {
-        border-right: 1px solid rgb(var(--gray-3));
+        border-right: 1px solid var(--surface-stroke);
     }
 
     + .formInputAddition {
-        border-left: 1px solid rgb(var(--gray-3));
+        border-left: 1px solid var(--surface-stroke);
     }
 
     @at-root .formInput:has(.formInputNative) + & {
-        border-left: 1px solid rgb(var(--gray-3));
+        border-left: 1px solid var(--surface-stroke);
     }
 }
 
 .formInputGroup {
-    composes: formInputEnabled;
+    composes: formInput;
 
     display: flex;
     padding: 0;
@@ -301,7 +314,7 @@
 
         + :is(.button, .buttonGroup) {
             margin: 0;
-            border-left: 1px solid rgb(var(--gray-3));
+            border-left: 1px solid var(--surface-stroke);
         }
     }
 
@@ -310,7 +323,7 @@
 
         + .button {
             margin: 0;
-            border-left: 1px solid rgb(var(--gray-3));
+            border-left: 1px solid var(--surface-stroke);
         }
     }
 
@@ -319,6 +332,15 @@
         border-bottom-left-radius: 0;
     }
 
+    &.isCondensed,
+    &.isSecondary {
+        .formInputAddition:not(:last-child) {
+            padding-right: 0;
+            background: unset;
+            border-color: transparent;
+        }
+    }
+
     &.isSecondary {
         .formInput {
             background: transparent;
@@ -326,20 +348,35 @@
             box-shadow: none;
         }
 
-        .formInputAddition:not(:last-child) {
-            padding-right: 0;
-        }
-
         .secondaryButton {
             background: transparent;
-            border-color: rgb(var(--gray-3));
+            border-color: var(--surface-stroke);
             box-shadow: none;
 
             @include mixin.hover {
-                background: rgb(var(--gray-3));
+                background: var(--surface-stroke-hover);
             }
         }
     }
+
+    &:has(*:disabled) {
+        cursor: not-allowed;
+
+        > * {
+            pointer-events: none;
+        }
+    }
+
+    :is(.button[disabled]),
+    :is(.button[aria-disabled="true"]) {
+        background: var(--surface-disabled);
+        opacity: 1;
+
+        &,
+        .buttonIcon {
+            color: var(--foreground-secondary);
+        }
+    }
 }
 
 .formDateInput {
@@ -398,7 +435,7 @@
         @include mixin.focus-ring(-1px, true);
 
         @include mixin.hover {
-            border-color: rgb(var(--gray-4));
+            border-color: var(--surface-stroke-hover);
         }
     }
 
@@ -430,7 +467,7 @@
     top: 0;
     height: 48px;
     margin-bottom: 9px;
-    background: rgb(var(--gray-0));
+    background: var(--surface);
     border-top: 0;
     border-left: 0;
     border-right: 0;
@@ -459,7 +496,7 @@
 }
 
 .formSelectPopup {
-    composes: basePaneStructure from './base/Pane.module.scss';
+    composes: basePane from './base/Pane.module.scss';
 
     position: fixed;
     display: block;
@@ -474,7 +511,7 @@
     z-index: 10000;
 
     .menuItem {
-        contain-intrinsic-size: #{'auto 42px'};
+        contain-intrinsic-size: auto 42px;
         content-visibility: auto;
     }
 
@@ -507,8 +544,8 @@
 }
 
 .isDisabled .formSelectSelected {
-    background: rgb(var(--gray-2));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--surface-disabled);
+    border: 1px solid var(--surface-stroke);
     color: var(--foreground-secondary);
     opacity: 1;
 }
@@ -556,14 +593,14 @@
     padding: 0;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-3));
-    border: 0;
-    border-radius: calc(var(--radius) / 2);
-    color: rgb(var(--primary-0));
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius-half);
+    color: var(--primary-25);
     cursor: pointer;
     pointer-events: none;
     transition: 210ms var(--swift-out);
-    transition-property: background, color, mixin.focus-ring-transition-properties();
+    transition-property: background, border-color, color, mixin.focus-ring-transition-properties();
 
     @include mixin.focus-outline;
 
@@ -590,12 +627,13 @@
 
     @include mixin.hover {
         + .checkboxElement {
-            background: rgb(var(--gray-4));
+            background: var(--gray-100);
         }
     }
 
     &:is(:checked, :indeterminate) + .checkboxElement {
-        background: rgb(var(--primary-7));
+        background: var(--primary-600);
+        border-color: var(--primary-600);
 
         .icon {
             opacity: 1;
@@ -611,15 +649,17 @@
     min-width: max-content;
     align-self: center;
     justify-self: center;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--surface-stroke);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     overflow: hidden;
+    transition: 180ms var(--swift-out);
+    transition-property: border-color, mixin.focus-ring-transition-properties();
 
-    @include mixin.focus-ring-transition(2px, true);
+    @include mixin.focus-ring(2px, true);
 
     @include mixin.hover {
-        border-color: rgb(var(--gray-4));
+        border-color: var(--surface-stroke-hover);
     }
 }
 
@@ -654,7 +694,7 @@
     text-align: center;
 
     &:hover {
-        border-color: rgb(var(--gray-3));
+        border-color: var(--surface-stroke-hover);
     }
 
     &,
@@ -689,8 +729,7 @@
 .pinInputField {
     padding: 0;
     width: 2.7ch;
-    background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--surface-stroke);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     font: inherit;
@@ -705,7 +744,7 @@
     composes: pinInput;
 
     .pinInputField {
-        background-color: rgb(var(--gray-0));
+        background-color: var(--surface);
         color: var(--foreground-prominent);
 
         @include mixin.focus-ring(-1px, true);
@@ -716,7 +755,7 @@
     composes: pinInput;
 
     .pinInputField {
-        background-color: rgb(var(--gray-2));
+        background-color: var(--surface-disabled);
         color: var(--foreground-secondary);
         cursor: not-allowed;
     }
@@ -728,20 +767,23 @@
     width: 54px;
     height: 30px;
     flex: 0 0 auto;
-    background: rgb(var(--gray-2));
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
     border-radius: 99px;
     contain: paint;
 
     &.isChecked {
+        border-color: transparent;
+
         .toggleInput::after {
             translate: 24px 0;
         }
 
         &:not(.isSwitch) {
-            background: rgb(var(--primary-7));
+            background: var(--primary-600);
 
             .toggleIcon {
-                color: rgb(var(--primary-0));
+                color: var(--primary-25);
             }
 
             .toggleInput::after {
@@ -804,14 +846,13 @@
     &::after {
         position: absolute;
         display: block;
-        top: 3px;
-        left: 3px;
+        top: 2px;
+        left: 2px;
         height: 24px;
         width: 24px;
         content: '';
-        background: rgb(var(--gray-0));
-        background-clip: padding-box;
-        border: 1px solid rgb(var(--gray-3));
+        background: var(--surface);
+        border: 1px solid var(--surface-stroke);
         border-radius: 99px;
         box-shadow: var(--shadow-sm);
     }

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

@@ -1,6 +1,15 @@
 @use '$flux/css/mixin';
 
 .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));
@@ -9,12 +18,13 @@
 .galleryAdd {
     composes: placeholder from './Placeholder.module.scss';
 
+    position: relative;
     aspect-ratio: 1 / 1;
-    color: rgb(var(--gray-7));
+    color: var(--foreground-secondary);
 
     @include mixin.hover {
-        background: rgb(var(--gray-1));
-        border-color: rgb(var(--gray-3));
+        background: var(--gray-100);
+        border-color: var(--gray-200);
     }
 }
 
@@ -50,7 +60,7 @@
     inset: 1px;
     align-items: center;
     justify-content: center;
-    backdrop-filter: blur(2px) saturate(180%);
+    backdrop-filter: blur(3px) saturate(180%);
     background: rgb(0 0 0 / .25);
     border-radius: calc(var(--radius) - 1px);
     z-index: 0;

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;
 }