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

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

@@ -1,5 +1,3 @@
-@value sparklesContainer, sparklesContainerActive, sparklesParticles from './base/Effect.module.scss';
-
 .stepperStep {
     position: relative;
 }
@@ -31,18 +29,18 @@
 
     &::before {
         width: var(--max);
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
     }
 
     &::after {
         width: calc(min(1, var(--progress)) * var(--max));
-        background: rgb(var(--primary-7));
+        background: var(--primary-7);
         transition: width 300ms var(--swift-out);
     }
 }
 
 .stepperStepsItem {
-    composes: sparklesContainer;
+    composes: sparklesContainer from './base/Effect.module.scss';
 
     position: relative;
     display: flex;
@@ -50,7 +48,7 @@
     width: 33px;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-3));
+    background: var(--gray-3);
     border: 0;
     border-radius: 99px;
     color: var(--foreground);
@@ -74,20 +72,20 @@
 }
 
 .stepperStepsItemComplete {
-    composes: sparklesContainerActive;
+    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-7);
+    border-color: var(--primary-7);
+    color: var(--primary-0);
 }
 
 .stepperStepsItemCurrent {
     composes: stepperStepsItem;
 
-    background: rgb(var(--gray-1));
+    background: var(--gray-1);
     color: var(--foreground-prominent);
-    outline-color: rgb(var(--primary-7));
+    outline-color: var(--primary-7);
     outline-width: 2px;
     transition-delay: 75ms;
 }
@@ -95,9 +93,9 @@
 .stepperStepsItemIdle {
     composes: stepperStepsItem;
 
-    outline-color: rgb(var(--gray-0));
+    outline-color: var(--gray-0);
 }
 
 .stepperStepsItemParticles {
-    composes: sparklesParticles;
+    composes: sparklesParticles from './base/Effect.module.scss';
 }

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(--gray-1);
     z-index: 0;
 }
 
@@ -31,7 +31,7 @@
 
     @media (hover: hover) {
         &:hover {
-            background: rgb(var(--gray-2));
+            background: var(--gray-2);
         }
     }
 }
@@ -60,7 +60,8 @@
     padding-right: 3px;
     align-items: flex-end;
     gap: 30px;
-    overflow: hidden;
+    overflow: auto;
+    scrollbar-width: none;
 
     -webkit-mask-image: var(--mask);
     mask-image: var(--mask);
@@ -112,7 +113,7 @@
 .tabBarItemActive {
     composes: tabBarItem;
 
-    border-color: rgb(var(--primary-7));
+    border-color: var(--primary-7);
     color: var(--foreground-prominent);
 }
 
@@ -132,14 +133,14 @@
 
     padding-left: 21px;
     padding-right: 21px;
-    background: rgb(var(--gray-1));
+    background: var(--gray-1);
 
     &: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(--gray-2);
     }
 }
 
@@ -154,7 +155,7 @@
 
 .paneHeader:has(+ .tabBar),
 .paneHeader:has(+ .tabs > .tabBar) {
-    background: rgb(var(--gray-1));
+    background: var(--gray-1);
 }
 
 .basePaneStructure > .tabs > .tabsBar {

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

@@ -1,9 +1,9 @@
-@value basePaneElement, basePaneLoader, basePaneStructure from './base/Pane.module.scss';
-
 .table {
-    composes: basePaneElement;
+    composes: basePaneElement from './base/Pane.module.scss';
 
     position: relative;
+    display: flex;
+    flex-flow: column;
     overflow: auto;
 
     :is(caption) {
@@ -18,10 +18,18 @@
     bottom: 0;
     border-spacing: 0;
     text-align: left;
+
+    &:has(.tableFill) {
+        flex-grow: 1;
+    }
+
+    &:has(.tableFill):has(.tablePagination) {
+        margin-bottom: -1px;
+    }
 }
 
 .tableLoader {
-    composes: basePaneLoader;
+    composes: basePaneLoader from './base/Pane.module.scss';
 }
 
 .tableRow {
@@ -33,7 +41,7 @@
 .tableCell {
     height: 0;
     padding: 0;
-    border: 0 solid rgb(var(--gray-2));
+    border: 0 solid var(--gray-1);
 
     @-moz-document url-prefix() {
         height: 100%;
@@ -50,7 +58,7 @@
 .tableHeader {
     composes: tableCell;
 
-    border-bottom: 2px solid rgb(var(--gray-2));
+    border-bottom: 2px solid var(--gray-1);
     color: var(--foreground-prominent);
 
     &.isShrinking {
@@ -61,7 +69,7 @@
     &.isSticky {
         position: sticky;
         top: 0;
-        background: rgb(var(--gray-1));
+        background: var(--gray-1);
     }
 }
 
@@ -73,18 +81,18 @@
 }
 
 tbody .tableRow:nth-child(even) .tableCell.isStriped {
-    background: rgb(var(--gray-2));
+    background: oklch(from var(--gray-1) l c h / .25);
 }
 
 @media (hover: hover) {
     tbody .tableRow:hover .tableCell.isHoverable,
     tbody .tableRow:has(:focus-visible) .tableCell.isHoverable {
-        background: rgb(var(--gray-1));
+        background: oklch(from var(--gray-1) l c h / .5);
     }
 }
 
 tfoot .tableCell {
-    border-top: 1px solid rgb(var(--gray-2));
+    border-top: 1px solid var(--gray-2);
 }
 
 .tableCell + .tableCell.isBordered {
@@ -97,20 +105,29 @@ tfoot .tableCell {
 
 .tableActions {
     margin: -3px 0 -3px -3px;
+}
 
-    .action {
-        @media (hover: hover) {
-            &:hover {
-                background: rgb(var(--gray-3));
-            }
-        }
+.tableFill {
+    pointer-events: none;
 
-        &:active {
-            background: rgb(var(--gray-4));
-        }
+    .tableCell {
+        height: 100%;
+    }
+
+    .tableCellContent {
+        padding: 0;
     }
 }
 
+.tablePagination {
+    position: sticky;
+    bottom: 0;
+    margin-top: auto;
+    background: var(--gray-0);
+    border-top: 1px solid var(--gray-2);
+    z-index: 100;
+}
+
 .tableSort {
     display: flex;
     height: 24px;
@@ -128,37 +145,37 @@ tfoot .tableCell {
 
     @media (hover: hover) {
         &:hover {
-            background: rgb(var(--gray-2));
+            background: var(--gray-2);
             color: var(--foreground);
         }
     }
 }
 
-:local(.basePaneStructure) > .table .tableCell:first-child .tableCellContent {
+.basePaneStructure > .table .tableCell:first-child .tableCellContent {
     padding-left: 21px;
 }
 
-:local(.basePaneStructure) > .table .tableCell:last-child .tableCellContent {
+.basePaneStructure > .table .tableCell:last-child .tableCellContent {
     padding-right: 21px;
 }
 
-:local(.basePaneStructure) > .table .tableActions {
+.basePaneStructure > .table .tableActions {
     margin-right: -3px;
 }
 
-:local(.basePaneStructure) > .table :is(caption) {
+.basePaneStructure > .table :is(caption) {
     padding: 12px 21px;
-    border-top: 1px solid rgb(var(--gray-3));
+    border-top: 1px solid var(--gray-3);
 }
 
-:local(.basePaneStructure) > .table .tableLoader {
+.basePaneStructure > .table .tableLoader {
     border-radius: var(--radius);
 }
 
-:not(:local(.basePaneStructure)) > .table .tableCell:not(.isBordered):first-child .tableCellContent {
+:not(.basePaneStructure) > .table .tableCell:not(.isBordered):first-child .tableCellContent {
     padding-left: 0;
 }
 
-:not(:local(.basePaneStructure)) > .table .tableCell:not(.isBordered):last-child .tableCellContent {
+:not(.basePaneStructure) > .table .tableCell:not(.isBordered):last-child .tableCellContent {
     padding-right: 0;
 }

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

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

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

@@ -1,5 +1,3 @@
-@value basePane, basePaneStructure from './base/Pane.module.scss';
-
 .toolbar {
     padding: 6px;
     contain: paint;
@@ -12,7 +10,7 @@
 }
 
 .toolbarFlat {
-    composes: basePane;
+    composes: basePane from './base/Pane.module.scss';
     composes: toolbar;
 
     position: relative;
@@ -21,7 +19,7 @@
 }
 
 .toolbarFloating {
-    composes: basePane;
+    composes: basePane from './base/Pane.module.scss';
     composes: toolbar;
 
     position: absolute;
@@ -55,10 +53,10 @@
     }
 }
 
-:local(.basePaneStructure) > .toolbarFlat {
+.basePaneStructure > .toolbarFlat {
     padding: 12px 15px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-11) / .05);
+    background: var(--gray-1);
+    border: 1px solid var(--gray-2);
     border-left: 0;
     border-right: 0;
     border-radius: 0;
@@ -75,6 +73,10 @@
         border-bottom-left-radius: var(--radius);
         border-bottom-right-radius: var(--radius);
     }
+
+    :local(.separator) {
+        background: var(--gray-2);
+    }
 }
 
 .paneHeader + .toolbarFlat {

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

@@ -6,10 +6,10 @@
     max-width: 360px;
     padding: 9px 15px;
     flex-flow: column;
-    background: rgb(var(--gray-11) / .9);
+    background: oklch(from var(--gray-11) l c h / .9);
     backdrop-filter: blur(6px) saturate(180%);
     border-radius: var(--radius);
-    color: rgb(var(--gray-0));
+    color: var(--gray-0);
     font-variant-numeric: tabular-nums;
     pointer-events: none;
     translate: calc(var(--x) * 1px) calc(var(--y) * 1px);

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

@@ -32,7 +32,7 @@
 
 .fadeTransitionEnterActive,
 .fadeTransitionLeaveActive {
-    transition: opacity 150ms var(--swift-out) !important;
+    transition: opacity 180ms var(--swift-out) !important;
 }
 
 .fadeTransitionEnterFrom,

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

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

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

@@ -1,38 +1,32 @@
-@layer flux-base {
-    .basePane {
-        background: rgb(var(--gray-0));
-        background-clip: padding-box;
-        border: 1px solid rgb(var(--gray-11) / .05);
-        border-radius: var(--radius);
-    }
-
-    [dark] .basePane {
-        border-color: rgb(var(--gray-3));
-    }
+.basePane {
+    background: var(--gray-0);
+    background-clip: padding-box;
+    border: 1px solid oklch(from var(--gray-11) l c h / .05);
+    border-radius: var(--radius);
+}
 
-    .basePaneLoader {
-        position: absolute;
-        display: flex;
-        inset: 0;
-        align-items: center;
-        justify-content: center;
-        backdrop-filter: blur(2px) saturate(180%);
-        background: rgb(var(--gray-0) / .75);
-        border-radius: inherit;
-        z-index: 100;
-    }
+.basePaneLoader {
+    position: absolute;
+    display: flex;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(2px) saturate(180%);
+    background: oklch(from var(--gray-0) l c h / .75);
+    border-radius: inherit;
+    z-index: 100;
+}
 
-    .basePaneStructure {
-        composes: basePane;
+.basePaneStructure {
+    composes: basePane;
 
-        position: relative;
-    }
+    position: relative;
+}
 
-    .basePaneStructure > .basePaneStructure {
-        background: unset;
-        border: 0;
-        box-shadow: none;
-    }
+.basePaneStructure > .basePaneStructure {
+    background: unset;
+    border: 0;
+    box-shadow: none;
 }
 
 .basePane > .basePaneElement,

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

@@ -1,16 +1,14 @@
-@value sliderThumb from './Slider.module.scss';
-
 .coordinatePicker {
     position: relative;
     aspect-ratio: 5 / 3;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-11) / .05);
+    background: var(--gray-1);
+    border: 1px solid oklch(from var(--gray-11) l c h / .05);
     border-radius: calc(var(--radius) / 2);
     z-index: 0;
 }
 
 .coordinatePickerThumb {
-    composes: sliderThumb;
+    composes: sliderThumb from './Slider.module.scss';
 
     z-index: 1;
 

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

@@ -23,9 +23,9 @@
     height: 24px;
     width: 24px;
     padding: 0;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
     background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-11) / .05);
+    border: 1px solid oklch(from var(--gray-11) l c h / .05);
     border-radius: 99px;
     box-shadow: var(--shadow-sm);
     cursor: grab;
@@ -36,12 +36,12 @@
 
     @media (hover: hover) {
         &:hover {
-            background-color: rgb(var(--gray-2));
+            background-color: var(--gray-1);
         }
     }
 
     &.isDisabled {
-        background-color: rgb(var(--gray-1));
+        background-color: var(--gray-1);
         box-shadow: none;
         pointer-events: none;
     }
@@ -52,17 +52,12 @@
     }
 }
 
-[dark] .sliderThumb {
-    background-color: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-11) / .4);
-}
-
 .sliderTrack {
     position: relative;
     height: 12px;
-    background: rgb(var(--gray-2));
+    background: var(--gray-2);
     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-3);
 }
 
 .sliderTrackValue {
@@ -70,12 +65,12 @@
     display: block;
     top: 0;
     height: inherit;
-    background: rgb(var(--primary-7));
+    background: var(--primary-7);
     border-radius: inherit;
 }
 
 .slider.isDisabled .sliderTrackValue {
-    background: rgb(var(--gray-4));
+    background: var(--gray-4);
 }
 
 .tick {
@@ -84,7 +79,7 @@
     bottom: 0;
     height: 9px;
     width: 2px;
-    background: rgb(var(--gray-4));
+    background: var(--gray-4);
     border-radius: 99px;
     color: var(--foreground-prominent);
     font-size: 10px;

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

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

package/src/css/reset.scss

@@ -60,6 +60,12 @@
         text-transform: none;
     }
 
+    // Inherit anchor color and remove default underline.
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
     // Create a new root stacking context.
     #app {
         isolation: isolate;