@flux-ui/components 3.0.0-next.7 → 3.0.0-next.70

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .pagination {
     display: flex;
@@ -12,12 +12,17 @@
     min-width: 36px;
     padding: 0 6px;
     background: unset;
-    border-color: transparent;
-    box-shadow: none !important;
+
+    &:local(.secondaryButton) {
+        border-color: transparent;
+        box-shadow: none;
+    }
 }
 
 .paginationButtonArrow {
-    border-color: rgb(var(--gray-3));
+    &:local(.secondaryButton) {
+        border-color: var(--surface-stroke);
+    }
 
     &:first-child {
         margin-right: 6px;
@@ -28,9 +33,9 @@
     }
 }
 
-.paginationButtonCurrent {
-    background: rgb(var(--primary-1));
-    border-color: rgb(var(--primary-3));
+.paginationButton.paginationButtonCurrent {
+    background: var(--primary-50);
+    border-color: var(--primary-200);
 }
 
 .paginationButtonSpacer {
@@ -86,6 +91,6 @@
 @include mixin.breakpoint-down(sm) {
     .paginationBar {
         flex-flow: column;
-        gap: 15px;
+        gap: 9px;
     }
 }

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

@@ -1,3 +1,5 @@
+@use '../../css/mixin';
+
 .pane {
     composes: basePaneStructure from './base/Pane.module.scss';
 }
@@ -15,22 +17,50 @@
 .paneWell {
     composes: pane;
 
-    background: rgb(var(--gray-1));
+    background-color: var(--gray-50);
+}
+
+:is(.paneDefault, .paneFlat, .paneWell):is(a) {
+    color: currentColor;
+    text-decoration: unset;
+
+    @include mixin.hover {
+        color: currentColor;
+    }
+}
+
+: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, border-color, box-shadow;
+
+    &:hover {
+        border-color: var(--surface-stroke-out-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;
+    &:has(+ :not(.paneBody)) {
+        padding: 18px;
     }
 }
 
@@ -56,13 +86,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 +103,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 +118,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 +131,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 +187,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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .placeholder {
     position: relative;
@@ -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;
 }

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

@@ -5,9 +5,9 @@
 .progressBarTrack {
     position: relative;
     height: 9px;
-    background: rgb(var(--gray-2));
-    border-radius: calc(var(--radius) / 2);
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-3));
+    background: var(--gray-50);
+    border-radius: var(--radius-half);
+    box-shadow: inset 0 0 0 1px var(--gray-200);
     contain: paint;
 }
 
@@ -16,9 +16,20 @@
     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-size: 150px 100%;
     border-radius: inherit;
+}
+
+.progressBarValueComplete {
+    composes: progressBarValue;
+
+    background: var(--primary-600);
+}
+
+.progressBarValueIncomplete {
+    composes: progressBarValue;
+
+    background: var(--primary-600) linear-gradient(-45deg, transparent 20%, rgb(from var(--primary-500) r g b / .5), transparent 80%);
+    background-size: 150px 100%;
     animation: progressBarValue 1s linear infinite;
 }
 
@@ -26,7 +37,7 @@
     composes: progressBarTrack;
 
     .progressBarValue {
-        background: linear-gradient(to right, rgb(var(--primary-8)) 20%, rgb(var(--primary-6)), rgb(var(--primary-8)) 80%);
+        background: var(--primary-600) linear-gradient(-45deg, transparent 20%, rgb(from var(--primary-500) r g b / .5), transparent 80%);
         background-size: 90px 100%;
         animation: progressBarIndeterminate 1s linear infinite;
     }

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .remove {
     position: absolute;
@@ -9,16 +9,16 @@
     width: 27px;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--danger-7));
-    border: 3px solid rgb(var(--gray-0));
-    border-radius: 99px;
-    color: rgb(var(--danger-0));
+    background: var(--danger-600);
+    border: 3px solid var(--surface);
+    border-radius: var(--radius-full);
+    color: var(--danger-25);
     cursor: pointer;
     transition: 300ms var(--swift-out);
     transition-property: background, opacity, scale;
 
     @include mixin.hover {
-        background: rgb(var(--danger-8));
+        background: var(--danger-700);
     }
 
     &.isHidden {

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

@@ -0,0 +1,109 @@
+.scroller {
+    position: relative;
+    overflow: auto;
+    overscroll-behavior: contain;
+    scrollbar-color: var(--surface-stroke) transparent;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--surface-stroke);
+        border-radius: 4px;
+    }
+
+    &:hover {
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--gray-400);
+        }
+    }
+}
+
+.scrollerDirectionVertical {
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.scrollerDirectionHorizontal {
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.scrollerDirectionBoth {
+    overflow: auto;
+}
+
+.scrollerSnapMandatoryHorizontal {
+    scroll-snap-type: x mandatory;
+}
+
+.scrollerSnapMandatoryVertical {
+    scroll-snap-type: y mandatory;
+}
+
+.scrollerSnapMandatoryBoth {
+    scroll-snap-type: both mandatory;
+}
+
+.scrollerSnapProximityHorizontal {
+    scroll-snap-type: x proximity;
+}
+
+.scrollerSnapProximityVertical {
+    scroll-snap-type: y proximity;
+}
+
+.scrollerSnapProximityBoth {
+    scroll-snap-type: both proximity;
+}
+
+.scrollerSnapAlignStart > * {
+    scroll-snap-align: start;
+}
+
+.scrollerSnapAlignCenter > * {
+    scroll-snap-align: center;
+}
+
+.scrollerSnapAlignEnd > * {
+    scroll-snap-align: end;
+}
+
+.scrollerFade {
+    --fade-mask-vertical: linear-gradient(
+        to bottom,
+        transparent 0,
+        black var(--fade-start, 0px),
+        black calc(100% - var(--fade-end, 0px)),
+        transparent 100%
+    );
+
+    --fade-mask-horizontal: linear-gradient(
+        to right,
+        transparent 0,
+        black var(--fade-start, 0px),
+        black calc(100% - var(--fade-end, 0px)),
+        transparent 100%
+    );
+}
+
+.scrollerFadeVertical {
+    composes: scrollerFade;
+
+    -webkit-mask-image: var(--fade-mask-vertical);
+    mask-image: var(--fade-mask-vertical);
+}
+
+.scrollerFadeHorizontal {
+    composes: scrollerFade;
+
+    -webkit-mask-image: var(--fade-mask-horizontal);
+    mask-image: var(--fade-mask-horizontal);
+}

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

@@ -1,11 +1,11 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .segmentedControl {
     position: relative;
     align-items: center;
     gap: 1px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-2));
+    background: var(--gray-50);
+    border: 1px solid var(--surface-stroke);
     border-radius: var(--radius);
 }
 
@@ -26,13 +26,14 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    background: rgb(var(--gray-0));
-    border-radius: var(--radius);
+    background: var(--surface);
+    border-radius: calc(var(--radius) - 2px);
     box-shadow: var(--shadow-sm);
-    outline: 1px solid rgb(var(--gray-3));
+    outline: 1px solid var(--surface-stroke);
     pointer-events: none;
     transition: 300ms var(--swift-out);
     transition-property: left, width;
+    translate: -1px 0;
 }
 
 .segmentedControlItem {
@@ -46,7 +47,7 @@
     justify-content: center;
     background: none;
     border: 0;
-    border-radius: calc(var(--radius) - 3px);
+    border-radius: var(--radius);
     color: var(--foreground);
     cursor: pointer;
     font-weight: 500;
@@ -55,7 +56,7 @@
     transition-property: background, color;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
     }
 
     &.isActive {
@@ -73,7 +74,7 @@
     height: 15px;
     width: 1px;
     flex-shrink: 0;
-    background: rgb(var(--gray-3));
+    background: var(--surface-stroke);
     transition: opacity 300ms var(--swift-out);
 
     &.isActive {

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .snackbar {
     composes: basePane from './base/Pane.module.scss';
@@ -18,10 +18,6 @@
             margin-bottom: 6px;
         }
     }
-
-    .progressBarTrack {
-        height: 6px;
-    }
 }
 
 .snackbarContent {
@@ -65,7 +61,7 @@
     align-items: center;
     justify-content: center;
     flex-grow: 1;
-    background: rgb(var(--gray-0));
+    background: var(--surface);
     border: 0;
     border-radius: 0;
     color: var(--foreground);
@@ -74,26 +70,31 @@
     font-weight: 500;
     outline: 0;
     text-align: center;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, color;
 
     &:hover {
-        background: rgb(var(--gray-1));
+        background: var(--surface-hover);
         color: var(--foreground-prominent);
     }
 
+    &:first-child {
+        font-weight: 600;
+    }
+
     &:active {
-        background: rgb(var(--gray-2));
+        background: var(--surface-active);
     }
 }
 
 .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(--surface-stroke);
 }
 
 .snackbarGray {
@@ -112,12 +113,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--primary-7));
+        color: var(--primary-600);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--primary-8));
+        stroke: var(--primary-700);
     }
 }
 
@@ -127,12 +128,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--danger-7));
+        color: var(--danger-600);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--danger-8));
+        stroke: var(--danger-700);
     }
 }
 
@@ -142,12 +143,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--info-7));
+        color: var(--info-600);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--info-8));
+        stroke: var(--info-700);
     }
 }
 
@@ -157,12 +158,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--success-7));
+        color: var(--success-600);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--success-8));
+        stroke: var(--success-700);
     }
 }
 
@@ -172,12 +173,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--warning-7));
+        color: var(--warning-600);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--warning-8));
+        stroke: var(--warning-700);
     }
 }
 

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-100);
+    --value: var(--primary-600);
 
     display: inline-block;
     height: 1em;