@flux-ui/components 3.0.0-next.4 → 3.0.0-next.41

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

@@ -108,12 +108,12 @@
 .noticeGray {
     composes: notice;
 
-    background: rgb(var(--gray-2));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-50);
+    border-color: var(--gray-200);
     color: var(--foreground);
 
     .noticeClose {
-        background: rgb(var(--gray-3));
+        background: var(--gray-200);
     }
 
     .noticePrefix,
@@ -125,154 +125,154 @@
 .noticePrimary {
     composes: notice;
 
-    background: rgb(var(--primary-2));
-    border-color: rgb(var(--primary-3));
-    color: rgb(var(--primary-11));
+    background: var(--primary-100);
+    border-color: var(--primary-200);
+    color: var(--primary-950);
 
     .noticeClose {
-        background: rgb(var(--primary-3));
+        background: var(--primary-200);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--primary-7));
+        color: var(--primary-800);
     }
 
     :local(.button) {
-        border-color: rgb(var(--primary-4));
+        border-color: var(--primary-300);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--primary-3));
+        stroke: var(--primary-200);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--primary-7));
+        stroke: var(--primary-600);
     }
 }
 
 .noticeDanger {
     composes: notice;
 
-    background: rgb(var(--danger-2));
-    border-color: rgb(var(--danger-3));
-    color: rgb(var(--danger-11));
+    background: var(--danger-100);
+    border-color: var(--danger-200);
+    color: var(--danger-950);
 
     .noticeClose {
-        background: rgb(var(--danger-3));
+        background: var(--danger-200);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--danger-7));
+        color: var(--danger-800);
     }
 
     :local(.button) {
-        border-color: rgb(var(--danger-4));
+        border-color: var(--danger-300);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--danger-3));
+        stroke: var(--danger-200);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--danger-7));
+        stroke: var(--danger-600);
     }
 }
 
 .noticeInfo {
     composes: notice;
 
-    background: rgb(var(--info-2));
-    border-color: rgb(var(--info-3));
-    color: rgb(var(--info-11));
+    background: var(--info-100);
+    border-color: var(--info-200);
+    color: var(--info-950);
 
     .noticeClose {
-        background: rgb(var(--info-3));
+        background: var(--info-200);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--info-7));
+        color: var(--info-800);
     }
 
     :local(.button) {
-        border-color: rgb(var(--info-4));
+        border-color: var(--info-300);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--info-3));
+        stroke: var(--info-200);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--info-7));
+        stroke: var(--info-600);
     }
 }
 
 .noticeSuccess {
     composes: notice;
 
-    background: rgb(var(--success-2));
-    border-color: rgb(var(--success-3));
-    color: rgb(var(--success-11));
+    background: var(--success-100);
+    border-color: var(--success-200);
+    color: var(--success-950);
 
     .noticeClose {
-        background: rgb(var(--success-3));
+        background: var(--success-200);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--success-7));
+        color: var(--success-800);
     }
 
     :local(.button) {
-        border-color: rgb(var(--success-4));
+        border-color: var(--success-300);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--success-3));
+        stroke: var(--success-200);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--success-7));
+        stroke: var(--success-600);
     }
 }
 
 .noticeWarning {
     composes: notice;
 
-    background: rgb(var(--warning-2));
-    border-color: rgb(var(--warning-3));
-    color: rgb(var(--warning-11));
+    background: var(--warning-100);
+    border-color: var(--warning-200);
+    color: var(--warning-950);
 
     .noticeClose {
-        background: rgb(var(--warning-3));
+        background: var(--warning-200);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--warning-7));
+        color: var(--warning-800);
     }
 
     :local(.button) {
-        border-color: rgb(var(--warning-4));
+        border-color: var(--warning-300);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--warning-3));
+        stroke: var(--warning-200);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--warning-7));
+        stroke: var(--warning-600);
     }
 }
 
 .basePane > .notice {
-    padding-left: 21px;
-    padding-right: 21px;
+    padding-left: 18px;
+    padding-right: 18px;
 }

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

@@ -0,0 +1,41 @@
+.overflowBar {
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 2;
+    overflow: hidden;
+
+    &.alignStart {
+        justify-content: flex-start;
+    }
+
+    &.alignCenter {
+        justify-content: center;
+    }
+
+    &.alignEnd {
+        justify-content: flex-end;
+    }
+}
+
+.overflowBarHorizontal {
+    composes: overflowBar;
+
+    flex-flow: row nowrap;
+}
+
+.overflowBarVertical {
+    composes: overflowBar;
+
+    flex-flow: column nowrap;
+}
+
+.overflowBarMeasurer {
+    position: absolute;
+    overflow: hidden;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.overflowBarOverflow {
+    display: contents;
+}

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

@@ -1,12 +1,37 @@
+.overlayView {
+    position: fixed;
+    inset: 0;
+    height: 100dvh;
+    width: 100dvw;
+}
+
+.overlayProvider {
+    composes: overlayView;
+
+    pointer-events: none;
+    z-index: 10000;
+}
+
+.overlayShade {
+    composes: overlayView;
+
+    background: var(--overlay);
+    backdrop-filter: blur(3px) saturate(180%);
+    pointer-events: none;
+    transition: opacity 600ms var(--swift-out);
+}
+
+.overlayProvider:not(:has(.overlay:not(.overlayTransitionLeaveActive):not(.slideOverTransitionLeaveActive))) .overlayShade {
+    opacity: 0;
+}
+
 .overlay {
     position: fixed;
     display: flex;
     inset: 0;
     height: 100dvh;
     width: 100dvw;
-    background: rgb(var(--gray-8) / .5);
-    backdrop-filter: blur(3px) saturate(180%);
-    z-index: 10000;
+    outline: 0;
 
     > .basePaneStructure {
         display: flex;
@@ -16,17 +41,40 @@
         flex-flow: column nowrap;
         box-shadow: var(--shadow-lg);
         overflow: auto;
+        transition: 420ms var(--swift-out);
+        transition-property: filter, scale;
 
         .paneFooter {
             position: sticky;
             bottom: 0;
             margin-top: auto;
         }
+
+        &::after {
+            position: absolute;
+            display: block;
+            inset: 0;
+            content: '';
+            background: var(--overlay-secondary);
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 420ms var(--swift-out);
+            z-index: 1;
+        }
+    }
+
+    &.isCurrent > .basePaneStructure {
+        pointer-events: auto;
     }
-}
 
-[dark] .overlay {
-    background: rgb(0 0 0 / .5);
+    &:not(.isCurrent) > .basePaneStructure {
+        filter: blur(3px);
+        scale: .95;
+
+        &::after {
+            opacity: 1;
+        }
+    }
 }
 
 .overlaySmall {
@@ -73,8 +121,8 @@
 
         > .paneHeader {
             top: 0;
-            padding-bottom: 21px;
-            border-bottom: 1px solid rgb(var(--gray-2));
+            padding-bottom: 18px;
+            border-bottom: 1px solid var(--gray-100);
             box-shadow: var(--shadow-xs);
 
             &:has(+ :where(.tabs, .tabBar)) {
@@ -95,7 +143,7 @@
         }
 
         > .paneHeader:has(.paneHeaderCaption > :is(span)) + .tabBar {
-            top: 69px;
+            top: 66px;
         }
 
         > .paneFooter {

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(--surface-stroke);
+    }
 
-        &: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-50);
+    border-color: var(--primary-200);
+}
+
+.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

@@ -15,22 +15,40 @@
 .paneWell {
     composes: pane;
 
-    background: rgb(var(--gray-1));
+    --surface: var(--background);
+}
+
+:is(.paneDefault, .paneFlat, .paneWell):is(button) {
+    padding: 0;
+}
+
+:is(.paneDefault, .paneFlat, .paneWell):is(a, button) {
+    cursor: pointer;
+    transition: 210ms var(--swift-out);
+    transition-property: background, box-shadow;
+
+    &:hover {
+        box-shadow: var(--shadow-lg);
+    }
+
+    &:active {
+        box-shadow: var(--shadow-xs);
+    }
 }
 
 .paneHeader {
     composes: basePaneElement from './base/Pane.module.scss';
 
     display: flex;
-    padding: 21px 21px 0;
+    padding: 18px 18px 0;
     gap: 15px;
 
     &:only-child {
-        padding: 21px;
+        padding: 18px;
     }
 
     &:has(+ .basePaneElement:not(.paneBody)) {
-        padding: 21px;
+        padding: 18px;
     }
 }
 
@@ -56,13 +74,13 @@
 
 .paneHeaderIcon {
     margin-top: 2px;
-    color: rgb(var(--primary-7));
+    color: var(--primary-600);
 }
 
 .paneBody {
     composes: basePaneElement from './base/Pane.module.scss';
 
-    padding: 21px;
+    padding: 18px;
 }
 
 .paneBody + .paneBody {
@@ -73,10 +91,10 @@
     composes: basePaneElement from './base/Pane.module.scss';
 
     display: flex;
-    padding: 21px;
+    padding: 18px;
     gap: 9px;
-    background: rgb(var(--gray-1));
-    border-top: 1px solid rgb(var(--gray-2));
+    background: var(--gray-50);
+    border-top: 1px solid var(--gray-100);
 }
 
 .paneLoader {
@@ -88,9 +106,9 @@
     top: 15px;
     right: 15px;
     padding: 6px 9px;
-    background: rgb(var(--gray-10));
-    border-radius: calc(var(--radius) / 2);
-    color: rgb(var(--gray-0));
+    background: var(--gray-900);
+    border-radius: var(--radius-half);
+    color: var(--gray-25);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1px;
@@ -101,13 +119,42 @@
 .paneMedia {
     position: relative;
     overflow: hidden;
+    z-index: 0;
+
+    &::after {
+        position: absolute;
+        inset: 0;
+        content: '';
+        border: 1px solid var(--surface-stroke-out);
+        border-radius: inherit;
+        z-index: 1;
+    }
+}
+
+.paneMediaDefault {
+    composes: paneMedia;
+
+    &:first-child {
+        margin: -1px;
+        margin-bottom: 0;
+        border-top-left-radius: var(--radius);
+        border-top-right-radius: var(--radius);
+    }
+
+    &:not(:first-child)::after {
+        border-top: 0;
+    }
+
+    &:not(:last-child)::after {
+        border-bottom: 0;
+    }
 }
 
 .paneMediaInset {
     composes: paneMedia;
 
-    margin: 21px;
-    border-radius: calc(var(--radius) / 2);
+    margin: 18px;
+    border-radius: var(--radius-half);
 
     &:not(:first-child) {
         margin-top: 0;
@@ -128,29 +175,12 @@
     object-position: center;
 }
 
-.paneDeck {
-    composes: paneDefault;
-
-    overflow: hidden;
-
-    > .baseAutoGrid {
-        margin-right: -1px;
-        margin-bottom: -1px;
-
-        > .pane {
-            border-top: 0;
-            border-left: 0;
-            border-radius: 0;
-        }
-    }
-}
-
 .paneGroup {
     position: relative;
 }
 
 .paneGroup + .paneGroup {
-    border-top: 1px solid rgb(var(--gray-11) / .05);
+    border-top: 1px solid var(--surface-stroke);
 }
 
 .paneIllustration {

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

@@ -7,8 +7,8 @@
 .percentageBarSegment {
     height: 12px;
     border-radius: calc(var(--radius) / 3);
-    transition: 180ms var(--swift-out);
-    transition-property: height, margin;
+    transition: var(--transition-default);
+    transition-property: height, margin, flex-grow;
 
     &:hover {
         height: 16px;

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

@@ -7,8 +7,8 @@
     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-50);
+    border: 2px dashed var(--gray-200);
     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-100);
         }
     }
 
@@ -67,6 +67,6 @@
 }
 
 .placeholderIcon {
-    color: rgb(var(--primary-7));
+    color: var(--primary-600);
     font-size: 20px;
 }