@flux-ui/components 3.0.0-next.22 → 3.0.0-next.24

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

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

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

@@ -29,12 +29,12 @@
 
     &::before {
         width: var(--max);
-        background: var(--gray-2);
+        background: var(--gray-100);
     }
 
     &::after {
         width: calc(min(1, var(--progress)) * var(--max));
-        background: var(--primary-7);
+        background: var(--primary-600);
         transition: width 300ms var(--swift-out);
     }
 }
@@ -48,7 +48,7 @@
     width: 33px;
     align-items: center;
     justify-content: center;
-    background: var(--gray-3);
+    background: var(--gray-100);
     border: 0;
     border-radius: 99px;
     color: var(--foreground);
@@ -75,17 +75,17 @@
     composes: sparklesContainerActive from './base/Effect.module.scss';
     composes: stepperStepsItem;
 
-    background: var(--primary-7);
-    border-color: var(--primary-7);
-    color: var(--primary-0);
+    background: var(--primary-600);
+    border-color: var(--primary-600);
+    color: var(--primary-25);
 }
 
 .stepperStepsItemCurrent {
     composes: stepperStepsItem;
 
-    background: var(--gray-1);
+    background: var(--gray-100);
     color: var(--foreground-prominent);
-    outline-color: var(--primary-7);
+    outline-color: var(--primary-600);
     outline-width: 2px;
     transition-delay: 75ms;
 }
@@ -93,7 +93,7 @@
 .stepperStepsItemIdle {
     composes: stepperStepsItem;
 
-    outline-color: 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 var(--gray-2);
+    box-shadow: inset 0 -2px var(--surface-stroke);
     z-index: 0;
 }
 
@@ -31,7 +31,7 @@
 
     @media (hover: hover) {
         &:hover {
-            background: var(--gray-2);
+            background: var(--surface-stroke);
         }
     }
 }
@@ -113,7 +113,7 @@
 .tabBarItemActive {
     composes: tabBarItem;
 
-    border-color: var(--primary-7);
+    border-color: var(--primary-600);
     color: var(--foreground-prominent);
 }
 
@@ -128,24 +128,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: var(--gray-1);
+    background: var(--gray-50);
 
     &:first-child {
         border-radius: var(--radius) var(--radius) 0 0;
     }
 
     &:not(:first-child) {
-        border-top: 1px solid 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) {
@@ -155,7 +159,7 @@
 
 .paneHeader:has(+ .tabBar),
 .paneHeader:has(+ .tabs > .tabBar) {
-    background: var(--gray-1);
+    background: var(--gray-50);
 }
 
 .basePaneStructure > .tabs > .tabsBar {

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

@@ -42,7 +42,7 @@
 .tableCell {
     height: 0;
     padding: 0;
-    border: 0 solid var(--gray-2);
+    border: 0 solid var(--gray-100);
 
     @-moz-document url-prefix() {
         height: 100%;
@@ -59,7 +59,7 @@
 .tableHeader {
     composes: tableCell;
 
-    border-bottom: 2px solid var(--gray-2);
+    border-bottom: 2px solid var(--gray-100);
     color: var(--foreground-prominent);
 
     &.isShrinking {
@@ -70,7 +70,7 @@
     &.isSticky {
         position: sticky;
         top: 0;
-        background: var(--gray-1);
+        background: var(--gray-50);
         z-index: 1;
     }
 }
@@ -83,18 +83,18 @@
 }
 
 tbody .tableRow:nth-child(even) .tableCell.isStriped {
-    background: oklch(from var(--gray-1) l c h / .5);
+    background: rgb(from var(--gray-50) r g b / .5);
 }
 
 @media (hover: hover) {
     tbody .tableRow:hover .tableCell.isHoverable,
     tbody .tableRow:has(:focus-visible) .tableCell.isHoverable {
-        background: var(--gray-1);
+        background: var(--gray-50);
     }
 }
 
 tfoot .tableCell {
-    border-top: 1px solid var(--gray-2);
+    border-top: 1px solid var(--gray-100);
 }
 
 .tableCell + .tableCell.isBordered {
@@ -125,13 +125,13 @@ tfoot .tableCell {
     composes: tableCell;
 
     position: relative;
-    background: var(--gray-1);
-    box-shadow: 0 0 24px var(--gray-1),
-                0 0 18px var(--gray-1),
-                0 0 12px var(--gray-1),
-                0 0 9px var(--gray-1),
-                0 0 6px var(--gray-1),
-                0 0 3px var(--gray-1);
+    background: var(--gray-50);
+    box-shadow: 0 0 24px var(--gray-50),
+                0 0 24px var(--gray-50),
+                0 0 24px var(--gray-50),
+                0 0 24px var(--gray-50),
+                0 0 24px var(--gray-50),
+                0 0 24px var(--gray-50);
     z-index: 2;
 }
 
@@ -143,11 +143,6 @@ tfoot .tableCell {
     max-width: 100cqw;
     flex-flow: row nowrap;
     gap: 15px;
-
-    > :local(.formInput) {
-        max-width: 300px;
-        min-width: 210px;
-    }
 }
 
 .tablePagination {
@@ -155,8 +150,8 @@ tfoot .tableCell {
     bottom: 0;
     margin-top: auto;
     margin-bottom: -1px;
-    background: var(--gray-0);
-    border-top: 1px solid var(--gray-2);
+    background: var(--surface);
+    border-top: 1px solid var(--gray-100);
     translate: 0 -1px;
     z-index: 100;
 }
@@ -171,14 +166,14 @@ tfoot .tableCell {
     justify-content: center;
     background: unset;
     border: 0;
-    border-radius: calc(var(--radius) / 2);
+    border-radius: var(--radius-half);
     color: var(--foreground-secondary);
     cursor: pointer;
     outline: 0;
 
     @media (hover: hover) {
         &:hover {
-            background: var(--gray-2);
+            background: var(--gray-100);
             color: var(--foreground);
         }
     }
@@ -198,7 +193,7 @@ tfoot .tableCell {
 
 .basePaneStructure > .table :is(caption) {
     padding: 12px 21px;
-    border-top: 1px solid var(--gray-3);
+    border-top: 1px solid var(--gray-100);
 }
 
 .basePaneStructure > .table .tableLoader {

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

@@ -18,7 +18,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 99px;
-    outline: 6px solid var(--gray-0);
+    outline: 6px solid var(--surface);
 }
 
 .timelineItemIcon {
@@ -41,7 +41,7 @@
     width: 30px;
     align-items: center;
     justify-content: center;
-    background: var(--gray-0);
+    background: var(--gray-25);
     border-radius: 99px;
 }
 
@@ -83,7 +83,7 @@
     left: 20px;
     height: 100%;
     width: 2px;
-    background: var(--gray-2);
+    background: var(--gray-100);
 }
 
 .timeline .timelineItem:last-of-type .timelineItemLine {
@@ -99,7 +99,7 @@
     }
 
     .timelineItemIcon {
-        background: var(--gray-2);
+        background: var(--gray-100);
     }
 }
 
@@ -108,11 +108,11 @@
 
     .timelineItemIcon,
     .timelineItemPhotoIcon {
-        color: var(--primary-7);
+        color: var(--primary-600);
     }
 
     .timelineItemIcon {
-        background: var(--primary-2);
+        background: var(--primary-100);
     }
 }
 
@@ -121,11 +121,11 @@
 
     .timelineItemIcon,
     .timelineItemPhotoIcon {
-        color: var(--danger-7);
+        color: var(--danger-600);
     }
 
     .timelineItemIcon {
-        background: var(--danger-2);
+        background: var(--danger-100);
     }
 }
 
@@ -134,11 +134,11 @@
 
     .timelineItemIcon,
     .timelineItemPhotoIcon {
-        color: var(--info-7);
+        color: var(--info-600);
     }
 
     .timelineItemIcon {
-        background: var(--info-2);
+        background: var(--info-100);
     }
 }
 
@@ -147,11 +147,11 @@
 
     .timelineItemIcon,
     .timelineItemPhotoIcon {
-        color: var(--success-7);
+        color: var(--success-600);
     }
 
     .timelineItemIcon {
-        background: var(--success-2);
+        background: var(--success-100);
     }
 }
 
@@ -160,10 +160,10 @@
 
     .timelineItemIcon,
     .timelineItemPhotoIcon {
-        color: var(--warning-7);
+        color: var(--warning-600);
     }
 
     .timelineItemIcon {
-        background: var(--warning-2);
+        background: var(--warning-100);
     }
 }

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

@@ -55,8 +55,9 @@
 
 .basePaneStructure > .toolbarFlat {
     padding: 12px 15px;
-    background: var(--gray-1);
-    border: 1px solid var(--gray-2);
+    align-self: unset;
+    background: var(--gray-50);
+    border: 1px solid var(--surface-stroke);
     border-left: 0;
     border-right: 0;
     border-radius: 0;
@@ -75,7 +76,7 @@
     }
 
     :local(.separator) {
-        background: var(--gray-2);
+        background: var(--surface-stroke);
     }
 }
 

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

@@ -6,14 +6,15 @@
     max-width: 360px;
     padding: 9px 15px;
     flex-flow: column;
-    background: oklch(from var(--gray-11) l c h / .9);
+    background: rgb(from var(--gray-950) r g b / .9);
     backdrop-filter: blur(6px) saturate(180%);
     border-radius: var(--radius);
-    color: var(--gray-0);
+    color: var(--gray-25);
     font-size: 14px;
     font-variant-numeric: tabular-nums;
     pointer-events: none;
     translate: calc(var(--x) * 1px) calc(var(--y) * 1px);
+    isolation: isolate;
     z-index: 100000;
 
     &::after {

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

@@ -95,13 +95,13 @@
 .verticalWindowTransitionEnterActive,
 .verticalWindowTransitionBackEnterActive {
     contain: paint;
-    transition: 150ms var(--deceleration-curve);
+    transition: 120ms var(--deceleration-curve);
     transition-property: opacity, transform;
 }
 
 .verticalWindowTransitionLeaveActive,
 .verticalWindowTransitionBackLeaveActive {
-    transition: 150ms var(--acceleration-curve);
+    transition: 120ms var(--acceleration-curve);
     transition-property: opacity, transform;
 }
 
@@ -119,13 +119,13 @@
 
 .windowTransitionEnterActive,
 .windowTransitionBackEnterActive {
-    transition: 150ms var(--deceleration-curve);
+    transition: 120ms var(--deceleration-curve);
     transition-property: height, opacity, transform;
 }
 
 .windowTransitionLeaveActive,
 .windowTransitionBackLeaveActive {
-    transition: 150ms var(--acceleration-curve);
+    transition: 120ms var(--acceleration-curve);
     transition-property: height, opacity, transform;
 }
 

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

@@ -20,7 +20,7 @@
 .dotPattern {
     composes: fillVisual;
 
-    fill: var(--gray-4);
+    fill: var(--gray-300);
     pointer-events: none;
 }
 
@@ -33,8 +33,8 @@
 .gridPattern {
     composes: fillVisual;
 
-    fill: var(--gray-2);
-    stroke: var(--gray-4);
+    fill: var(--gray-100);
+    stroke: var(--gray-300);
     pointer-events: none;
 }
 

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

@@ -1,7 +1,7 @@
 .basePane {
-    background: var(--gray-0);
+    background: var(--surface);
     background-clip: padding-box;
-    border: 1px solid oklch(from var(--gray-11) l c h / .05);
+    border: 1px solid var(--surface-stroke-out);
     border-radius: var(--radius);
 }
 
@@ -11,8 +11,8 @@
     inset: 0;
     align-items: center;
     justify-content: center;
-    backdrop-filter: blur(2px) saturate(180%);
-    background: oklch(from var(--gray-0) l c h / .75);
+    backdrop-filter: blur(3px) saturate(180%);
+    background: var(--surface-loader);
     border-radius: inherit;
     z-index: 100;
 }

package/src/css/component/primitive/CoordinatePicker.module.scss

@@ -1,9 +1,9 @@
 .coordinatePicker {
     position: relative;
     aspect-ratio: 5 / 3;
-    background: var(--gray-1);
-    border: 1px solid oklch(from var(--gray-11) l c h / .05);
-    border-radius: calc(var(--radius) / 2);
+    background: var(--gray-50);
+    border: 1px solid var(--surface-stroke-out);
+    border-radius: var(--radius-half);
     z-index: 0;
 }
 

package/src/css/component/primitive/Slider.module.scss

@@ -23,9 +23,9 @@
     height: 24px;
     width: 24px;
     padding: 0;
-    background: var(--gray-0);
+    background: var(--surface);
     background-clip: padding-box;
-    border: 1px solid oklch(from var(--gray-11) l c h / .05);
+    border: 1px solid var(--surface-stroke-out);
     border-radius: 99px;
     box-shadow: var(--shadow-sm);
     cursor: grab;
@@ -36,12 +36,12 @@
 
     @media (hover: hover) {
         &:hover {
-            background-color: var(--gray-1);
+            background-color: var(--surface-hover);
         }
     }
 
     &.isDisabled {
-        background-color: var(--gray-1);
+        background-color: var(--surface-disabled);
         box-shadow: none;
         pointer-events: none;
     }
@@ -55,9 +55,9 @@
 .sliderTrack {
     position: relative;
     height: 12px;
-    background: var(--gray-2);
-    border-radius: calc(var(--radius) / 2);
-    box-shadow: inset 0 0 0 1px var(--gray-3);
+    background: var(--gray-50);
+    border-radius: var(--radius-half);
+    box-shadow: inset 0 0 0 1px var(--surface-stroke);
 }
 
 .sliderTrackValue {
@@ -65,12 +65,12 @@
     display: block;
     top: 0;
     height: inherit;
-    background: var(--primary-7);
+    background: var(--primary-600);
     border-radius: inherit;
 }
 
 .slider.isDisabled .sliderTrackValue {
-    background: var(--gray-4);
+    background: var(--gray-300);
 }
 
 .tick {
@@ -79,7 +79,7 @@
     bottom: 0;
     height: 9px;
     width: 2px;
-    background: var(--gray-4);
+    background: var(--gray-300);
     border-radius: 99px;
     color: var(--foreground-prominent);
     font-size: 10px;

package/src/css/mixin/breakpoints.scss

@@ -17,19 +17,31 @@ $-breakpoints: (
         @error 'Breakpoint "#{$breakpoint}" not found in "#{$names}".';
     }
 
-    @return if($n < list.length($names), list.nth($names, $n + 1), null);
+    @if $n < list.length($names) {
+        @return list.nth($names, $n + 1);
+    }
+
+    @return null;
 }
 
 @function -maxWidth($breakpoint) {
     $next: -next($breakpoint);
 
-    @return if($next, -minWidth($next) - .02, null);
+    @if $next {
+        @return -minWidth($next) - .02;
+    }
+
+    @return null;
 }
 
 @function -minWidth($breakpoint) {
     $min: map.get($-breakpoints, $breakpoint);
 
-    @return if($min != 0, $min, null);
+    @if $min != 0 {
+        @return $min;
+    }
+
+    @return null;
 }
 
 @mixin breakpoint-between($lower, $upper) {

package/src/css/mixin/focus-ring.scss

@@ -1,10 +1,10 @@
 @mixin focus-outline {
-    outline: 2px solid oklch(from var(--primary-7) l c h / 0);
+    outline: 2px solid rgb(from var(--primary-600) r g b / 0);
     outline-offset: 0;
 }
 
 @mixin focus-outline-visible($offset: 0) {
-    outline-color: var(--primary-7);
+    outline-color: var(--primary-600);
     outline-offset: $offset;
 }