@flux-ui/components 3.0.0-next.6 → 3.0.0-next.60

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

@@ -1,17 +1,32 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .tab {
     position: relative;
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
 }
 
-.tabBar {
-    --tab-padding: 12px;
-
+.baseTabBar {
     position: relative;
-    box-shadow: inset 0 -2px rgb(var(--gray-2));
     z-index: 0;
 }
 
+.tabBarDefault {
+    composes: baseTabBar;
+
+    --tab-padding: 12px;
+
+    box-shadow: inset 0 -2px var(--surface-stroke);
+}
+
+.tabBarPills {
+    composes: baseTabBar;
+
+    padding: 3px;
+    border-radius: var(--radius);
+}
+
 .tabBarArrow {
     position: absolute;
     display: flex;
@@ -26,13 +41,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);
     }
 }
 
@@ -48,19 +61,26 @@
     right: -6px;
 }
 
-.tabBarTabs {
+.baseTabBarTabs {
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+    scrollbar-width: none;
+}
+
+.tabBarTabsDefault {
+    composes: baseTabBarTabs;
+
     --mask-start: 0%;
     --mask-end: 100%;
     --mask: linear-gradient(to right, transparent, black var(--mask-start), black, black var(--mask-end), transparent);
 
-    display: flex;
     margin-left: -3px;
     margin-right: -3px;
     padding-left: 3px;
     padding-right: 3px;
-    align-items: flex-end;
-    gap: 30px;
-    overflow: hidden;
+    gap: 27px;
 
     -webkit-mask-image: var(--mask);
     mask-image: var(--mask);
@@ -74,51 +94,129 @@
     }
 }
 
-.tabBarItem {
+.tabBarTabsPills {
+    composes: baseTabBarTabs;
+
+    gap: 0;
+}
+
+.baseTabBarItem {
     display: inline-flex;
-    padding: var(--tab-padding) 0;
     align-items: center;
-    gap: 9px;
     background: unset;
     border: 0;
-    border-bottom: 2px solid transparent;
     color: var(--foreground);
     contain: layout;
     cursor: pointer;
     font-weight: 500;
     outline: 0;
-    transition: 180ms var(--swift-out);
-    transition-property: border-color, color;
     white-space: nowrap;
 
     &::before {
         position: absolute;
         inset: 0;
         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, -2px);
+
+    // Inset offset zodat de focus-ring niet wordt weggeclipt
+    // door de overflow: auto op .tabBarTabs.
+    &::before {
+        outline-offset: -2px;
+    }
+
+    &:disabled,
+    &[aria-disabled=true] {
+        box-shadow: none;
+        opacity: .5;
+        pointer-events: none;
+    }
+}
+
+.tabBarItemDefault {
+    composes: baseTabBarItem;
+
+    padding: var(--tab-padding) 0;
+    gap: 9px;
+    border-bottom: 2px solid transparent;
+    transition: var(--transition-default);
+    transition-property: border-color, color;
+
+    &::before {
+        border-radius: var(--radius);
+    }
+
+    @include mixin.hover {
+        border-color: var(--foreground);
     }
+}
+
+.tabBarItemDefaultActive {
+    composes: tabBarItemDefault;
+
+    color: var(--foreground-prominent);
+}
+
+.tabBarItemPills {
+    composes: baseTabBarItem;
+
+    position: relative;
+    height: 36px;
+    padding: 0 12px;
+    gap: 6px;
+    border-radius: calc(var(--radius) - 2px);
+    transition: color 300ms var(--swift-out);
+    z-index: 1;
 
-    @include mixin.focus-ring-pseudo(before);
+    &::before {
+        border-radius: calc(var(--radius) - 2px);
+    }
 
-    @media (hover: hover) {
-        &:hover {
-            border-color: var(--foreground);
-        }
+    @include mixin.hover {
+        color: var(--foreground-prominent);
     }
 }
 
-.tabBarItemActive {
-    composes: tabBarItem;
+.tabBarItemPillsActive {
+    composes: tabBarItemPills;
 
-    border-color: rgb(var(--primary-7));
     color: var(--foreground-prominent);
+    cursor: default;
+}
+
+.baseTabBarHighlight {
+    position: absolute;
+    pointer-events: none;
+    transition: 300ms var(--swift-out);
+    transition-property: left, width;
+}
+
+.tabBarHighlightDefault {
+    composes: baseTabBarHighlight;
+
+    bottom: 0;
+    height: 2px;
+    background: var(--primary-600);
+    z-index: 1;
+}
+
+.tabBarHighlightPills {
+    composes: baseTabBarHighlight;
+
+    top: 0;
+    bottom: 0;
+    background: var(--gray-100);
+    border-radius: calc(var(--radius) - 2px);
+    z-index: 0;
 }
 
 .tabs {
     display: flex;
     flex-flow: column;
+    flex-grow: 1;
     overflow: visible;
 }
 
@@ -126,35 +224,49 @@
     margin-bottom: 18px;
 }
 
-.basePaneStructure > .tabBar,
-.basePaneStructure > .tabs >.tabBar {
+.basePaneStructure > .tabBarDefault,
+.basePaneStructure > .tabs > .tabBarDefault,
+.basePaneStructure > .form > .tabBarDefault,
+.basePaneStructure > .form > .tabs > .tabBarDefault {
     --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 {
-    padding-top: 6px;
-
+.basePaneStructure > .paneHeader + .tabBarDefault,
+.basePaneStructure > .paneHeader + .tabs > .tabBarDefault,
+.basePaneStructure > .form > .paneHeader + .tabBarDefault,
+.basePaneStructure > .form > .paneHeader + .tabs > .tabBarDefault {
     &:not(:first-child) {
         border-top: 0;
     }
 }
 
-.paneHeader:has(+ .tabBar),
-.paneHeader:has(+ .tabs > .tabBar) {
-    background: rgb(var(--gray-1));
+.paneHeader:has(+ .tabBarDefault),
+.paneHeader:has(+ .tabs > .tabBarDefault) {
+    background: var(--gray-50);
+}
+
+.basePaneStructure > .tabBarPills,
+.basePaneStructure > .tabs > .tabBarPills,
+.basePaneStructure > .form > .tabBarPills,
+.basePaneStructure > .form > .tabs > .tabBarPills {
+    padding-left: 6px;
+    padding-right: 6px;
+
+    &:first-child {
+        padding-top: 6px;
+    }
 }
 
 .basePaneStructure > .tabs > .tabsBar {

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

@@ -1,8 +1,11 @@
+@use '~flux/components/css/mixin';
+
 .table {
     composes: basePaneElement from './base/Pane.module.scss';
 
     position: relative;
     display: flex;
+    container: table / inline-size;
     flex-flow: column;
     overflow: auto;
 
@@ -14,7 +17,7 @@
 }
 
 .tableBase {
-    min-width: 100%;
+    min-width: 100cqw;
     bottom: 0;
     border-spacing: 0;
     text-align: left;
@@ -41,7 +44,7 @@
 .tableCell {
     height: 0;
     padding: 0;
-    border: 0 solid rgb(var(--gray-2));
+    border: 0 solid var(--gray-100);
 
     @-moz-document url-prefix() {
         height: 100%;
@@ -58,7 +61,7 @@
 .tableHeader {
     composes: tableCell;
 
-    border-bottom: 2px solid rgb(var(--gray-2));
+    border-bottom: 2px solid var(--gray-100);
     color: var(--foreground-prominent);
 
     &.isShrinking {
@@ -69,7 +72,8 @@
     &.isSticky {
         position: sticky;
         top: 0;
-        background: rgb(var(--gray-1));
+        background: var(--gray-50);
+        z-index: 1;
     }
 }
 
@@ -81,18 +85,18 @@
 }
 
 tbody .tableRow:nth-child(even) .tableCell.isStriped {
-    background: rgb(var(--gray-2));
+    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: rgb(var(--gray-1));
+        background: var(--gray-50);
     }
 }
 
 tfoot .tableCell {
-    border-top: 1px solid rgb(var(--gray-2));
+    border-top: 1px solid var(--gray-100);
 }
 
 .tableCell + .tableCell.isBordered {
@@ -104,19 +108,7 @@ tfoot .tableCell {
 }
 
 .tableActions {
-    margin: -3px 0 -3px -3px;
-
-    .action {
-        @media (hover: hover) {
-            &:hover {
-                background: rgb(var(--gray-3));
-            }
-        }
-
-        &:active {
-            background: rgb(var(--gray-4));
-        }
-    }
+    margin: -4px 0 -4px -3px;
 }
 
 .tableFill {
@@ -131,12 +123,38 @@ tfoot .tableCell {
     }
 }
 
+.tableBar {
+    composes: tableCell;
+
+    position: relative;
+    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;
+}
+
+.tableBarContent {
+    composes: tableCellContent;
+
+    position: sticky;
+    left: 0;
+    max-width: 100cqw;
+    flex-flow: row nowrap;
+    gap: 15px;
+}
+
 .tablePagination {
     position: sticky;
     bottom: 0;
     margin-top: auto;
-    background: rgb(var(--gray-0));
-    border-top: 1px solid rgb(var(--gray-2));
+    margin-bottom: -1px;
+    background: var(--surface);
+    border-top: 1px solid var(--gray-100);
+    translate: 0 -1px;
     z-index: 100;
 }
 
@@ -150,25 +168,23 @@ 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: rgb(var(--gray-2));
-            color: var(--foreground);
-        }
+    @include mixin.hover {
+        background: var(--gray-100);
+        color: var(--foreground);
     }
 }
 
 .basePaneStructure > .table .tableCell:first-child .tableCellContent {
-    padding-left: 21px;
+    padding-left: 18px;
 }
 
 .basePaneStructure > .table .tableCell:last-child .tableCellContent {
-    padding-right: 21px;
+    padding-right: 18px;
 }
 
 .basePaneStructure > .table .tableActions {
@@ -176,8 +192,8 @@ tfoot .tableCell {
 }
 
 .basePaneStructure > .table :is(caption) {
-    padding: 12px 21px;
-    border-top: 1px solid rgb(var(--gray-3));
+    padding: 12px 18px;
+    border-top: 1px solid var(--gray-100);
 }
 
 .basePaneStructure > .table .tableLoader {

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

@@ -17,8 +17,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 99px;
-    outline: 6px solid rgb(var(--gray-0));
+    border-radius: var(--radius-full);
+    outline: 6px solid var(--surface);
 }
 
 .timelineItemIcon {
@@ -41,8 +41,8 @@
     width: 30px;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-0));
-    border-radius: 99px;
+    background: var(--gray-25);
+    border-radius: var(--radius-full);
 }
 
 .timelineItemPhotoImage {
@@ -57,14 +57,18 @@
 
 .timelineItemBody {
     position: relative;
-    align-self: center;
+    display: flex;
     padding-top: 9px;
     padding-bottom: 9px;
+    align-items: flex-start;
+    align-self: center;
+    flex-flow: column;
+    gap: 15px;
 }
 
 .timelineItemHeader {
     display: flex;
-    margin-bottom: 9px;
+    margin-bottom: -9px;
     flex-flow: column;
 
     :is(strong) {
@@ -83,7 +87,7 @@
     left: 20px;
     height: 100%;
     width: 2px;
-    background: rgb(var(--gray-2));
+    background: var(--gray-100);
 }
 
 .timeline .timelineItem:last-of-type .timelineItemLine {
@@ -99,7 +103,7 @@
     }
 
     .timelineItemIcon {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
     }
 }
 
@@ -108,11 +112,11 @@
 
     .timelineItemIcon,
     .timelineItemPhotoIcon {
-        color: rgb(var(--primary-7));
+        color: var(--primary-600);
     }
 
     .timelineItemIcon {
-        background: rgb(var(--primary-2));
+        background: var(--primary-100);
     }
 }
 
@@ -121,11 +125,11 @@
 
     .timelineItemIcon,
     .timelineItemPhotoIcon {
-        color: rgb(var(--danger-7));
+        color: var(--danger-600);
     }
 
     .timelineItemIcon {
-        background: rgb(var(--danger-2));
+        background: var(--danger-100);
     }
 }
 
@@ -134,11 +138,11 @@
 
     .timelineItemIcon,
     .timelineItemPhotoIcon {
-        color: rgb(var(--info-7));
+        color: var(--info-600);
     }
 
     .timelineItemIcon {
-        background: rgb(var(--info-2));
+        background: var(--info-100);
     }
 }
 
@@ -147,11 +151,11 @@
 
     .timelineItemIcon,
     .timelineItemPhotoIcon {
-        color: rgb(var(--success-7));
+        color: var(--success-600);
     }
 
     .timelineItemIcon {
-        background: rgb(var(--success-2));
+        background: var(--success-100);
     }
 }
 
@@ -160,14 +164,10 @@
 
     .timelineItemIcon,
     .timelineItemPhotoIcon {
-        color: rgb(var(--warning-7));
+        color: var(--warning-600);
     }
 
     .timelineItemIcon {
-        background: rgb(var(--warning-2));
+        background: var(--warning-100);
     }
 }
-
-[dark] .timelineItemIcon {
-    background: rgb(var(--gray-2));
-}

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

@@ -44,19 +44,20 @@
 
     &.isTopEnd,
     &.isBottomEnd {
-        right: 21px;
+        right: 18px;
     }
 
     &.isTopStart,
     &.isBottomStart {
-        left: 21px;
+        left: 18px;
     }
 }
 
 .basePaneStructure > .toolbarFlat {
     padding: 12px 15px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-11) / .05);
+    align-self: unset;
+    background: var(--gray-50);
+    border: 1px solid var(--surface-stroke);
     border-left: 0;
     border-right: 0;
     border-radius: 0;
@@ -73,8 +74,12 @@
         border-bottom-left-radius: var(--radius);
         border-bottom-right-radius: var(--radius);
     }
+
+    :local(.separator) {
+        background: var(--surface-stroke);
+    }
 }
 
 .paneHeader + .toolbarFlat {
-    margin-top: 21px;
+    margin-top: 18px;
 }

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

@@ -6,13 +6,15 @@
     max-width: 360px;
     padding: 9px 15px;
     flex-flow: column;
-    background: rgb(var(--gray-11) / .9);
-    backdrop-filter: blur(6px) saturate(180%);
+    background: var(--overlay-strong);
+    backdrop-filter: blur(3px) saturate(180%);
     border-radius: var(--radius);
-    color: rgb(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 {
@@ -33,8 +35,7 @@
 }
 
 [dark] .tooltip {
-    background: rgb(0 0 0 / .9);
-    color: white;
+    color: var(--gray-700);
 }
 
 .tooltipAbove {

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

@@ -32,7 +32,7 @@
 
 .fadeTransitionEnterActive,
 .fadeTransitionLeaveActive {
-    transition: opacity 150ms var(--swift-out) !important;
+    transition: opacity var(--transition-default) !important;
 }
 
 .fadeTransitionEnterFrom,
@@ -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;
 }