@flux-ui/components 3.0.0-next.5 → 3.0.0-next.52

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: linear-gradient(to right, var(--primary-600) 20%, var(--primary-500), var(--primary-600) 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: linear-gradient(to right, var(--primary-600) 20%, var(--primary-500), var(--primary-600) 80%);
         background-size: 90px 100%;
         animation: progressBarIndeterminate 1s linear infinite;
     }

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));
-    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/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-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

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

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

@@ -1,36 +1,8 @@
 .statistic {
-    padding: 21px;
-    gap: 21px;
-
-    &.isGray .statisticIcon {
-        background: rgb(var(--gray-2));
-        color: rgb(var(--gray-7));
-    }
-
-    &.isPrimary .statisticIcon {
-        background: rgb(var(--primary-2));
-        color: rgb(var(--primary-7));
-    }
-
-    &.isDanger .statisticIcon {
-        background: rgb(var(--danger-2));
-        color: rgb(var(--danger-7));
-    }
-
-    &.isInfo .statisticIcon {
-        background: rgb(var(--info-2));
-        color: rgb(var(--info-7));
-    }
-
-    &.isSuccess .statisticIcon {
-        background: rgb(var(--success-2));
-        color: rgb(var(--success-7));
-    }
-
-    &.isWarning .statisticIcon {
-        background: rgb(var(--warning-2));
-        color: rgb(var(--warning-7));
-    }
+    padding: 18px;
+    flex-basis: 0;
+    flex-grow: 1;
+    gap: 18px;
 }
 
 .statisticChange {
@@ -47,23 +19,23 @@
     }
 
     &.isPrimary {
-        color: rgb(var(--primary-7));
+        color: var(--primary-600);
     }
 
     &.isDanger {
-        color: rgb(var(--danger-7));
+        color: var(--danger-600);
     }
 
     &.isInfo {
-        color: rgb(var(--info-7));
+        color: var(--info-600);
     }
 
     &.isSuccess {
-        color: rgb(var(--success-7));
+        color: var(--success-600);
     }
 
     &.isWarning {
-        color: rgb(var(--warning-7));
+        color: var(--warning-600);
     }
 }
 
@@ -85,12 +57,13 @@
     }
 }
 
-.statisticIcon {
-    display: flex;
+.statisticIcon :local(.icon) {
+    font-size: .45em;
+}
+
+.statisticImage {
     height: 48px;
     width: 48px;
-    align-items: center;
-    justify-content: center;
     border-radius: var(--radius);
 }
 

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

@@ -29,12 +29,12 @@
 
     &::before {
         width: var(--max);
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
     }
 
     &::after {
         width: calc(min(1, var(--progress)) * var(--max));
-        background: rgb(var(--primary-7));
+        background: var(--primary-600);
         transition: width 300ms var(--swift-out);
     }
 }
@@ -48,9 +48,9 @@
     width: 33px;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-3));
+    background: var(--gray-100);
     border: 0;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground);
     cursor: default;
     font-size: 14px;
@@ -75,17 +75,17 @@
     composes: sparklesContainerActive from './base/Effect.module.scss';
     composes: stepperStepsItem;
 
-    background: rgb(var(--primary-7));
-    border-color: rgb(var(--primary-7));
-    color: rgb(var(--primary-0));
+    background: var(--primary-600);
+    border-color: var(--primary-600);
+    color: var(--primary-25);
 }
 
 .stepperStepsItemCurrent {
     composes: stepperStepsItem;
 
-    background: rgb(var(--gray-1));
+    background: var(--gray-100);
     color: var(--foreground-prominent);
-    outline-color: rgb(var(--primary-7));
+    outline-color: var(--primary-600);
     outline-width: 2px;
     transition-delay: 75ms;
 }
@@ -93,7 +93,7 @@
 .stepperStepsItemIdle {
     composes: stepperStepsItem;
 
-    outline-color: rgb(var(--gray-0));
+    outline-color: var(--gray-25);
 }
 
 .stepperStepsItemParticles {

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

@@ -8,7 +8,7 @@
     --tab-padding: 12px;
 
     position: relative;
-    box-shadow: inset 0 -2px rgb(var(--gray-2));
+    box-shadow: inset 0 -2px var(--surface-stroke);
     z-index: 0;
 }
 
@@ -26,13 +26,11 @@
     color: var(--foreground);
     cursor: pointer;
     outline: 0;
-    transition: background 180ms var(--swift-out);
+    transition: background var(--transition-default);
     z-index: 1;
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--gray-2));
-        }
+    @include mixin.hover {
+        background: var(--surface-stroke);
     }
 }
 
@@ -58,9 +56,10 @@
     margin-right: -3px;
     padding-left: 3px;
     padding-right: 3px;
-    align-items: flex-end;
-    gap: 30px;
-    overflow: hidden;
+    align-items: center;
+    gap: 27px;
+    overflow: auto;
+    scrollbar-width: none;
 
     -webkit-mask-image: var(--mask);
     mask-image: var(--mask);
@@ -87,7 +86,7 @@
     cursor: pointer;
     font-weight: 500;
     outline: 0;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: border-color, color;
     white-space: nowrap;
 
@@ -97,22 +96,27 @@
         content: '';
         border-radius: var(--radius);
         pointer-events: none;
-        transition: 180ms var(--swift-out) mixin.focus-ring-transition-properties();
+        transition: var(--transition-default) mixin.focus-ring-transition-properties();
     }
 
     @include mixin.focus-ring-pseudo(before);
 
-    @media (hover: hover) {
-        &:hover {
-            border-color: var(--foreground);
-        }
+    @include mixin.hover {
+        border-color: var(--foreground);
+    }
+
+    &:disabled,
+    &[aria-disabled=true] {
+        box-shadow: none;
+        opacity: .5;
+        pointer-events: none;
     }
 }
 
 .tabBarItemActive {
     composes: tabBarItem;
 
-    border-color: rgb(var(--primary-7));
+    border-color: var(--primary-600);
     color: var(--foreground-prominent);
 }
 
@@ -127,24 +131,28 @@
 }
 
 .basePaneStructure > .tabBar,
-.basePaneStructure > .tabs >.tabBar {
+.basePaneStructure > .tabs > .tabBar,
+.basePaneStructure > .form > .tabBar,
+.basePaneStructure > .form > .tabs > .tabBar {
     --tab-padding: 18px;
 
-    padding-left: 21px;
-    padding-right: 21px;
-    background: rgb(var(--gray-1));
+    padding-left: 18px;
+    padding-right: 18px;
+    background: var(--gray-50);
 
     &:first-child {
         border-radius: var(--radius) var(--radius) 0 0;
     }
 
     &:not(:first-child) {
-        border-top: 1px solid rgb(var(--gray-2));
+        border-top: 1px solid var(--surface-stroke);
     }
 }
 
 .basePaneStructure > .paneHeader + .tabBar,
-.basePaneStructure > .paneHeader + .tabs > .tabBar {
+.basePaneStructure > .paneHeader + .tabs > .tabBar,
+.basePaneStructure > .form > .paneHeader + .tabBar,
+.basePaneStructure > .form > .paneHeader + .tabs > .tabBar {
     padding-top: 6px;
 
     &:not(:first-child) {
@@ -154,7 +162,7 @@
 
 .paneHeader:has(+ .tabBar),
 .paneHeader:has(+ .tabs > .tabBar) {
-    background: rgb(var(--gray-1));
+    background: var(--gray-50);
 }
 
 .basePaneStructure > .tabs > .tabsBar {