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

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

@@ -1,59 +1,96 @@
 @use '$flux/css/mixin';
 
 .pagination {
-    z-index: 0;
+    display: flex;
+    gap: 1px;
+}
+
+.paginationButton {
+    composes: secondaryButton from './Button.module.scss';
+
+    height: 36px;
+    min-width: 36px;
+    padding: 0 6px;
+    background: unset;
 
-    .button {
-        min-width: 40px;
+    &:local(.secondaryButton) {
+        border-color: transparent;
+        box-shadow: none;
     }
+}
 
-    .buttonLabel {
-        margin-left: 0;
-        margin-right: 0;
-        min-width: 18px;
+.paginationButtonArrow {
+    &:local(.secondaryButton) {
+        border-color: var(--gray-2);
+    }
 
-        &: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;
+.paginationButton.paginationButtonCurrent {
+    background: var(--primary-1);
+    border-color: 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;
+    }
 }

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

@@ -1,91 +1,86 @@
-@value baseAutoGrid from './base/Grid.module.scss';
-@value basePaneElement, basePaneLoader, basePaneStructure from './base/Pane.module.scss';
-
-@layer flux-base {
-    .pane {
-        composes: basePaneStructure;
-    }
+.pane {
+    composes: basePaneStructure from './base/Pane.module.scss';
+}
 
-    .paneDefault {
-        composes: pane;
+.paneDefault {
+    composes: pane;
 
-        box-shadow: var(--shadow-sm);
-    }
+    box-shadow: var(--shadow-sm);
+}
 
-    .paneFlat {
-        composes: pane;
-    }
+.paneFlat {
+    composes: pane;
+}
 
-    .paneWell {
-        composes: pane;
+.paneWell {
+    composes: pane;
 
-        background: rgb(var(--gray-1));
-    }
-
-    .paneHeader {
-        composes: basePaneElement;
+    background: var(--gray-1);
+}
 
-        display: flex;
-        padding: 21px 21px 0;
-        gap: 15px;
+.paneHeader {
+    composes: basePaneElement from './base/Pane.module.scss';
 
-        &:only-child {
-            padding: 21px;
-        }
+    display: flex;
+    padding: 21px 21px 0;
+    gap: 15px;
 
-        &:has(+ :local(.basePaneElement):not(.paneBody)) {
-            padding: 21px;
-        }
+    &:only-child {
+        padding: 21px;
     }
 
-    .paneHeaderCaption {
-        display: flex;
-        flex-flow: column;
-        flex-grow: 1;
-        line-height: 24px;
+    &:has(+ .basePaneElement:not(.paneBody)) {
+        padding: 21px;
+    }
+}
 
-        :is(strong) {
-            color: var(--foreground-prominent);
-            font-weight: 600;
+.paneHeaderCaption {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    line-height: 24px;
 
-            &:has(+ :is(span)) {
-                font-size: 16px;
-            }
-        }
+    :is(strong) {
+        color: var(--foreground-prominent);
+        font-weight: 600;
 
-        :is(span) {
-            font-size: 14px;
+        &:has(+ :is(span)) {
+            font-size: 16px;
         }
     }
 
-    .paneHeaderIcon {
-        margin-top: 2px;
-        color: rgb(var(--primary-7));
+    :is(span) {
+        font-size: 14px;
     }
+}
 
-    .paneBody {
-        composes: basePaneElement;
+.paneHeaderIcon {
+    margin-top: 2px;
+    color: var(--primary-7);
+}
 
-        padding: 21px;
-    }
+.paneBody {
+    composes: basePaneElement from './base/Pane.module.scss';
 
-    .paneBody + .paneBody {
-        padding-top: 0;
-    }
+    padding: 21px;
+}
 
-    .paneFooter {
-        composes: basePaneElement;
+.paneBody + .paneBody {
+    padding-top: 0;
+}
 
-        display: flex;
-        padding: 21px;
-        gap: 9px;
-        background: rgb(var(--gray-1));
-        border-top: 1px solid rgb(var(--gray-2));
-    }
+.paneFooter {
+    composes: basePaneElement from './base/Pane.module.scss';
+
+    display: flex;
+    padding: 21px;
+    gap: 9px;
+    background: var(--gray-0);
+    border-top: 1px solid var(--gray-1);
 }
 
 .paneLoader {
-    composes: basePaneLoader;
+    composes: basePaneLoader from './base/Pane.module.scss';
 }
 
 .paneTag {
@@ -93,9 +88,9 @@
     top: 15px;
     right: 15px;
     padding: 6px 9px;
-    background: rgb(var(--gray-10));
+    background: var(--gray-10);
     border-radius: calc(var(--radius) / 2);
-    color: rgb(var(--gray-0));
+    color: var(--gray-0);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1px;
@@ -138,7 +133,7 @@
 
     overflow: hidden;
 
-    > :local(.baseAutoGrid) {
+    > .baseAutoGrid {
         margin-right: -1px;
         margin-bottom: -1px;
 
@@ -155,7 +150,7 @@
 }
 
 .paneGroup + .paneGroup {
-    border-top: 1px solid rgb(var(--gray-11) / .05);
+    border-top: 1px solid oklch(from var(--gray-11) l c h / .05);
 }
 
 .paneIllustration {

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

@@ -4,11 +4,11 @@
     position: relative;
     display: flex;
     align-items: center;
-    flex: 1 1 0;
+    flex: 1 0 auto;
     flex-flow: column;
     justify-content: center;
-    background: rgb(var(--gray-1));
-    border: 1px dashed rgb(var(--gray-3));
+    background: var(--gray-1);
+    border: 2px dashed var(--gray-3);
     border-radius: var(--radius);
     text-align: center;
     user-select: none;
@@ -17,7 +17,7 @@
         cursor: pointer;
 
         @include mixin.hover {
-            background: rgb(var(--gray-2));
+            background: var(--gray-2);
         }
     }
 
@@ -67,6 +67,6 @@
 }
 
 .placeholderIcon {
-    color: rgb(var(--primary-7));
+    color: var(--primary-7);
     font-size: 20px;
 }

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

@@ -1,5 +1,3 @@
-@value basePaneStructure from './base/Pane.module.scss';
-
 .progressBar {
     position: relative;
 }
@@ -7,9 +5,9 @@
 .progressBarTrack {
     position: relative;
     height: 9px;
-    background: rgb(var(--gray-2));
+    background: var(--gray-1);
     border-radius: calc(var(--radius) / 2);
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-3));
+    box-shadow: inset 0 0 0 1px var(--gray-2);
     contain: paint;
 }
 
@@ -18,7 +16,7 @@
     top: 0;
     left: 0;
     height: inherit;
-    background: linear-gradient(to right, rgb(var(--primary-8)) 20%, rgb(var(--primary-6)), rgb(var(--primary-8)) 80%);
+    background: linear-gradient(to right, var(--primary-7) 20%, var(--primary-6), var(--primary-7) 80%);
     background-size: 150px 100%;
     border-radius: inherit;
     animation: progressBarValue 1s linear infinite;
@@ -28,7 +26,7 @@
     composes: progressBarTrack;
 
     .progressBarValue {
-        background: linear-gradient(to right, rgb(var(--primary-8)) 20%, rgb(var(--primary-6)), rgb(var(--primary-8)) 80%);
+        background: linear-gradient(to right, var(--primary-7) 20%, var(--primary-6), var(--primary-7) 80%);
         background-size: 90px 100%;
         animation: progressBarIndeterminate 1s linear infinite;
     }
@@ -55,11 +53,11 @@
     white-space: nowrap;
 }
 
-:local(.basePaneStructure) > .progressBar:first-child {
+.basePaneStructure > .progressBar:first-child {
     margin: 9px 9px 0;
 }
 
-:local(.basePaneStructure) > .progressBar:last-child {
+.basePaneStructure > .progressBar:last-child {
     margin: 0 9px 9px;
 }
 

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

@@ -9,16 +9,16 @@
     width: 27px;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--danger-7));
-    border: 3px solid rgb(var(--gray-0));
+    background: var(--danger-7);
+    border: 3px solid var(--gray-0);
     border-radius: 99px;
-    color: rgb(var(--danger-0));
+    color: var(--danger-0);
     cursor: pointer;
     transition: 300ms var(--swift-out);
     transition-property: background, opacity, scale;
 
     @include mixin.hover {
-        background: rgb(var(--danger-8));
+        background: var(--danger-8);
     }
 
     &.isHidden {

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

@@ -4,8 +4,8 @@
     position: relative;
     align-items: center;
     gap: 1px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-2));
+    background: var(--gray-1);
+    border: 1px solid var(--gray-2);
     border-radius: var(--radius);
 }
 
@@ -26,10 +26,10 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
     border-radius: var(--radius);
     box-shadow: var(--shadow-sm);
-    outline: 1px solid rgb(var(--gray-3));
+    outline: 1px solid var(--gray-2);
     pointer-events: none;
     transition: 300ms var(--swift-out);
     transition-property: left, width;
@@ -55,7 +55,7 @@
     transition-property: background, color;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
     }
 
     &.isActive {
@@ -73,7 +73,7 @@
     height: 15px;
     width: 1px;
     flex-shrink: 0;
-    background: rgb(var(--gray-3));
+    background: var(--gray-2);
     transition: opacity 300ms var(--swift-out);
 
     &.isActive {

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

@@ -1,9 +1,7 @@
 @use '$flux/css/mixin';
 
-@value basePane from './base/Pane.module.scss';
-
 .snackbar {
-    composes: basePane;
+    composes: basePane from './base/Pane.module.scss';
 
     display: flex;
     box-shadow: var(--shadow-xl), var(--shadow-2xl);
@@ -67,7 +65,7 @@
     align-items: center;
     justify-content: center;
     flex-grow: 1;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
     border: 0;
     border-radius: 0;
     color: var(--foreground);
@@ -80,22 +78,27 @@
     transition-property: background, color;
 
     &:hover {
-        background: rgb(var(--gray-1));
+        background: var(--gray-1);
         color: var(--foreground-prominent);
     }
 
+    &:first-child {
+        font-weight: 600;
+    }
+
     &:active {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
     }
 }
 
 .snackbarActions {
     display: flex;
     padding-left: 1px;
+    max-width: max-content;
     flex-flow: column;
     flex-grow: 1;
     gap: 1px;
-    background: rgb(var(--gray-2));
+    background: var(--gray-2);
 }
 
 .snackbarGray {
@@ -114,12 +117,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--primary-7));
+        color: var(--primary-7);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--primary-8));
+        stroke: var(--primary-8);
     }
 }
 
@@ -129,12 +132,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--danger-7));
+        color: var(--danger-7);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--danger-8));
+        stroke: var(--danger-8);
     }
 }
 
@@ -144,12 +147,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--info-7));
+        color: var(--info-7);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--info-8));
+        stroke: var(--info-8);
     }
 }
 
@@ -159,12 +162,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--success-7));
+        color: var(--success-7);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--success-8));
+        stroke: var(--success-8);
     }
 }
 
@@ -174,12 +177,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--warning-7));
+        color: var(--warning-7);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--warning-8));
+        stroke: var(--warning-8);
     }
 }
 
@@ -197,9 +200,9 @@
     }
 
     @include mixin.breakpoint-up(md) {
-        width: 540px;
+        width: 570px;
         top: 30px;
-        left: calc(50dvw - 270px);
+        left: calc(50dvw - 285px);
     }
 }
 

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

@@ -1,6 +1,6 @@
 .spinner {
-    --track: rgb(var(--gray-2));
-    --value: rgb(var(--primary-7));
+    --track: var(--gray-2);
+    --value: var(--primary-7);
 
     display: inline-block;
     height: 1em;

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

@@ -1,35 +1,37 @@
 .statistic {
     padding: 21px;
+    flex-basis: 0;
+    flex-grow: 1;
     gap: 21px;
 
     &.isGray .statisticIcon {
-        background: rgb(var(--gray-2));
-        color: rgb(var(--gray-7));
+        background: var(--gray-2);
+        color: var(--gray-7);
     }
 
     &.isPrimary .statisticIcon {
-        background: rgb(var(--primary-2));
-        color: rgb(var(--primary-7));
+        background: var(--primary-2);
+        color: var(--primary-7);
     }
 
     &.isDanger .statisticIcon {
-        background: rgb(var(--danger-2));
-        color: rgb(var(--danger-7));
+        background: var(--danger-2);
+        color: var(--danger-7);
     }
 
     &.isInfo .statisticIcon {
-        background: rgb(var(--info-2));
-        color: rgb(var(--info-7));
+        background: var(--info-2);
+        color: var(--info-7);
     }
 
     &.isSuccess .statisticIcon {
-        background: rgb(var(--success-2));
-        color: rgb(var(--success-7));
+        background: var(--success-2);
+        color: var(--success-7);
     }
 
     &.isWarning .statisticIcon {
-        background: rgb(var(--warning-2));
-        color: rgb(var(--warning-7));
+        background: var(--warning-2);
+        color: var(--warning-7);
     }
 }
 
@@ -47,23 +49,23 @@
     }
 
     &.isPrimary {
-        color: rgb(var(--primary-7));
+        color: var(--primary-7);
     }
 
     &.isDanger {
-        color: rgb(var(--danger-7));
+        color: var(--danger-7);
     }
 
     &.isInfo {
-        color: rgb(var(--info-7));
+        color: var(--info-7);
     }
 
     &.isSuccess {
-        color: rgb(var(--success-7));
+        color: var(--success-7);
     }
 
     &.isWarning {
-        color: rgb(var(--warning-7));
+        color: var(--warning-7);
     }
 }