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

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;
 

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

@@ -1,59 +1,91 @@
 @use '$flux/css/mixin';
 
 .pagination {
-    z-index: 0;
+    display: flex;
+    gap: 1px;
+}
 
-    .button {
-        min-width: 40px;
-    }
+.paginationButton {
+    composes: secondaryButton from './Button.module.scss';
+
+    height: 36px;
+    min-width: 36px;
+    padding: 0 6px;
+    background: unset;
+    border-color: transparent;
+    box-shadow: none !important;
+}
 
-    .buttonLabel {
-        margin-left: 0;
-        margin-right: 0;
-        min-width: 18px;
+.paginationButtonArrow {
+    border-color: rgb(var(--gray-3));
 
-        &:nth-child(2) {
-            min-width: unset;
-        }
+    &:first-child {
+        margin-right: 6px;
     }
 
-    .primaryButton {
-        z-index: 1;
+    &:last-child {
+        margin-left: 6px;
     }
 }
 
-.paginationCurrent {
-    gap: 3px;
-    font-variant-numeric: tabular-nums;
+.paginationButtonCurrent {
+    background: rgb(var(--primary-1));
+    border-color: rgb(var(--primary-3));
+}
+
+.paginationButtonSpacer {
+    pointer-events: none;
+}
+
+.paginationButtonIcon {
+    composes: secondaryButtonIcon from './Button.module.scss';
+
+    font-size: 16px;
+}
+
+.paginationButtonLabel {
+    composes: secondaryButtonLabel from './Button.module.scss';
+
+    margin: 0;
+    min-width: unset;
+    font-size: 12px;
 }
 
 .paginationBar {
+    display: flex;
     align-items: center;
-    flex-direction: column;
+    flex-flow: row;
+}
 
-    .formInputGroup {
-        max-width: max-content;
-    }
+.paginationBarLimit {
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    gap: 15px;
+}
 
-    .formSelect {
-        width: 78px;
-    }
+.paginationBarLimitDisplayingOf {
+    font-size: 12px;
+    font-weight: 600;
+}
 
-    .pagination .button:first-child {
-        border-radius: 0;
-    }
+.paginationBarLimitSelect {
+    min-height: 36px;
+    width: 120px;
 
-    @include mixin.breakpoint-up(lg) {
-        flex-direction: row;
+    .menuItem {
+        min-height: 36px;
     }
-}
 
-@include mixin.breakpoint-down(md) {
-    .paginationBarSpacer {
-        display: none;
+    .menuItemLabel {
+        font-size: 12px;
+        font-weight: 600;
     }
 }
 
-.paneFooter > .paginationBar {
-    flex-grow: 1;
+@include mixin.breakpoint-down(sm) {
+    .paginationBar {
+        flex-flow: column;
+        gap: 15px;
+    }
 }