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

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

@@ -3,31 +3,31 @@
 .primaryButton {
     composes: button from './base/Button.module.scss';
 
-    background: var(--primary-7);
-    border-color: var(--primary-8);
-    box-shadow: 0 1px 1px oklch(from var(--primary-7) l c h / .25);
-    color: var(--primary-0);
+    background: var(--primary-600);
+    border-color: var(--primary-700);
+    box-shadow: 0 1px 1px rgb(from var(--primary-600) r g b / .25);
+    color: var(--primary-25);
 
     @include mixin.hover {
-        background: var(--primary-8);
-        border-color: var(--primary-9);
+        background: var(--primary-700);
+        border-color: var(--primary-800);
     }
 
     &:active {
-        background: var(--primary-9);
+        background: var(--primary-800);
         scale: .9875;
     }
 
     .spinner {
-        --track: var(--primary-8);
-        --value: var(--primary-0);
+        --track: var(--primary-700);
+        --value: var(--primary-25);
     }
 }
 
 .primaryButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: var(--primary-0);
+    color: var(--primary-25);
 }
 
 .primaryButtonLabel {
@@ -37,17 +37,16 @@
 .secondaryButton {
     composes: button from './base/Button.module.scss';
 
-    background: var(--gray-0);
-    border-color: var(--gray-2);
+    background: var(--surface);
+    border-color: var(--surface-stroke);
     color: var(--foreground);
 
     @include mixin.hover {
-        background: var(--gray-1);
+        background: var(--surface-hover);
     }
 
     &:active {
-        background: var(--gray-2);
-        border-color: var(--gray-3);
+        background: var(--surface-active);
         scale: .9875;
     }
 }
@@ -55,7 +54,7 @@
 .secondaryButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: var(--foreground-prominent);
+    color: var(--foreground);
 }
 
 .secondaryButtonLabel {
@@ -65,42 +64,90 @@
 .destructiveButton {
     composes: button from './base/Button.module.scss';
 
-    background: var(--gray-0);
-    border-color: var(--gray-2);
+    background: var(--surface);
+    border-color: var(--surface-stroke);
     color: var(--foreground);
 
     @include mixin.hover {
-        background: var(--gray-1);
+        background: var(--surface-hover);
     }
 
     &:active {
-        background: var(--gray-2);
-        border-color: var(--gray-3);
+        background: var(--surface-active);
         scale: .9875;
     }
 
     .spinner {
-        --value: var(--danger-7);
+        --value: var(--danger-600);
     }
 }
 
 .destructiveButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: var(--danger-7);
+    color: var(--danger-600);
 }
 
 .destructiveButtonLabel {
     composes: buttonLabel from './base/Button.module.scss';
 
     &:only-child {
-        color: var(--danger-7);
+        color: var(--danger-600);
     }
 }
 
 .secondaryButton,
 .destructiveButton {
-    box-shadow: var(--shadow-px), inset 0 -1px oklch(from var(--gray-3) l c h / .15);
+    box-shadow: var(--shadow-px), inset 0 -1px rgb(from var(--gray-200) r g b / .15);
+}
+
+.baseLinkButton {
+    composes: button from './base/Button.module.scss';
+
+    gap: 6px;
+    border-color: transparent;
+    box-shadow: none;
+
+    @include mixin.hover {
+        background: var(--surface-hover);
+    }
+
+    &:active {
+        background: var(--surface-active);
+        scale: .9875;
+    }
+}
+
+.primaryLinkButton {
+    composes: baseLinkButton;
+
+    color: var(--primary-700);
+}
+
+.primaryLinkButtonIcon {
+    composes: buttonIcon from './base/Button.module.scss';
+
+    color: var(--primary-700);
+}
+
+.primaryLinkButtonLabel {
+    composes: buttonLabel from './base/Button.module.scss';
+}
+
+.secondaryLinkButton {
+    composes: baseLinkButton;
+
+    color: var(--foreground-prominent);
+}
+
+.secondaryLinkButtonIcon {
+    composes: buttonIcon from './base/Button.module.scss';
+
+    color: var(--foreground);
+}
+
+.secondaryLinkButtonLabel {
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .linkButton {
@@ -111,7 +158,7 @@
     padding: 0;
     border: 0;
     box-shadow: unset;
-    color: var(--primary-7);
+    color: var(--primary-600);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 4px;
@@ -119,7 +166,7 @@
     @include mixin.focus-ring(6px);
 
     @include mixin.hover {
-        color: var(--primary-10);
+        color: var(--primary-900);
 
         .linkButtonIcon {
             transform: translate3d(6px, 0, 0);
@@ -130,7 +177,7 @@
 .linkButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: var(--primary-7);
+    color: var(--primary-600);
     transition: inherit;
     transition-property: transform;
 

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

@@ -33,7 +33,7 @@
     text-transform: capitalize;
 
     @include mixin.hover {
-        color: var(--primary-7);
+        color: var(--primary-600);
     }
 }
 
@@ -56,12 +56,12 @@
     gap: 1px;
     grid-template-columns: repeat(7, 1fr);
     grid-template-rows: min-content repeat(6, auto);
-    background: var(--gray-1);
+    background: var(--gray-100);
 }
 
 .calendarCell {
     padding: 12px 21px;
-    background: var(--gray-0);
+    background: var(--gray-25);
 }
 
 .calendarDay {
@@ -85,7 +85,7 @@
     padding-bottom: 39px;
 
     &.isDisabled {
-        background: oklch(from var(--gray-0) l c h / .5);
+        background: var(--gray-50);
         color: var(--foreground-secondary);
         pointer-events: none;
 
@@ -120,9 +120,9 @@
     margin-left: -9px;
     margin-right: -9px;
     padding: 6px 9px;
-    background: var(--primary-2);
+    background: var(--primary-100);
     border: 0;
-    color: var(--primary-9);
+    color: var(--primary-800);
     cursor: pointer;
     font-size: 14px;
     line-height: 1.3em;
@@ -135,7 +135,7 @@
     -webkit-box-orient: vertical;
 
     &.isSingle {
-        border-radius: calc(var(--radius) / 2);
+        border-radius: var(--radius-half);
     }
 
     &.isMiddle {
@@ -145,14 +145,14 @@
 
     &.isStart {
         margin-right: -21px;
-        border-top-left-radius: calc(var(--radius) / 2);
-        border-bottom-left-radius: calc(var(--radius) / 2);
+        border-top-left-radius: var(--radius-half);
+        border-bottom-left-radius: var(--radius-half);
     }
 
     &.isEnd {
         margin-left: -21px;
-        border-top-right-radius: calc(var(--radius) / 2);
-        border-bottom-right-radius: calc(var(--radius) / 2);
+        border-top-right-radius: var(--radius-half);
+        border-bottom-right-radius: var(--radius-half);
     }
 
     &:not(.isSingle):not(.isStart) {
@@ -162,6 +162,6 @@
     }
 
     @include mixin.hover {
-        background: var(--primary-3);
+        background: var(--primary-200);
     }
 }

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

@@ -7,8 +7,8 @@
     align-items: center;
     flex-grow: 0;
     gap: 9px;
-    background: var(--gray-1);
-    border: 1px solid var(--gray-2);
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
     border-radius: 99px;
     color: var(--foreground);
     transition: 180ms var(--swift-out);
@@ -21,21 +21,19 @@
 
         @media (hover: hover) {
             &:hover {
-                background: var(--gray-2);
-                border-color: var(--gray-3);
+                background: var(--gray-100);
             }
         }
     }
 
     &.isSelected {
-        background: var(--primary-2);
-        border-color: var(--primary-3);
-        color: var(--primary-7);
+        background: var(--primary-50);
+        border-color: var(--primary-200);
+        color: var(--primary-600);
 
         @media (hover: hover) {
             &:hover {
-                background: var(--primary-3);
-                border-color: var(--primary-4);
+                background: var(--primary-100);
             }
         }
     }

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

@@ -30,7 +30,7 @@
 
     &::after {
         background: var(--color);
-        box-shadow: inset 0 0 0 1px oklch(from var(--gray-11) l c h / .05);
+        box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
     }
 }
 
@@ -52,7 +52,7 @@
 
     &::after {
         background: linear-gradient(to top, black, transparent);
-        box-shadow: inset 0 0 0 1px oklch(from var(--gray-11) l c h / .05);
+        box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
     }
 }
 
@@ -156,8 +156,8 @@
 .colorSelectCustom {
     composes: colorSelectItem;
 
-    background: var(--gray-1);
-    border: 1px solid var(--gray-2);
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
 }
 
 .colorSelectCustomPicker {

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

@@ -41,8 +41,8 @@
 .commentContent {
     min-width: 0;
     padding: 12px 18px;
-    background: linear-gradient(to bottom, var(--gray-0), var(--gray-1));
-    border: 1px solid var(--gray-2);
+    background: linear-gradient(to bottom, var(--gray-25), var(--gray-50));
+    border: 1px solid var(--gray-200);
     border-radius: calc(var(--radius) * 2);
     box-shadow: var(--shadow-xs);
 }
@@ -52,8 +52,8 @@
 }
 
 .comment.isReceived .commentContent {
-    background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
-    border-color: var(--gray-3);
+    background: linear-gradient(to bottom, var(--gray-50), var(--gray-100));
+    border-color: var(--gray-200);
     border-bottom-left-radius: var(--radius);
 }
 
@@ -88,37 +88,37 @@
 }
 
 [dark] .commentContent {
-    background: linear-gradient(to bottom, var(--gray-1), var(--gray-0));
+    background: linear-gradient(to bottom, var(--gray-50), var(--gray-25));
 }
 
 [dark] .comment.isReceived .commentContent {
-    background: linear-gradient(to bottom, var(--gray-2), var(--gray-1));
+    background: linear-gradient(to bottom, var(--gray-100), var(--gray-50));
 }
 
 @keyframes commentTyping {
     0%,
     80%,
     100% {
-        background: var(--gray-3);
-        box-shadow: -9px 0 var(--gray-3), 9px 0 var(--gray-3);
+        background: var(--gray-200);
+        box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
         translate: 0 0;
     }
 
     20% {
-        background: var(--gray-3);
-        box-shadow: -9px -4px var(--gray-5), 9px 0 var(--gray-3);
+        background: var(--gray-200);
+        box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
         translate: 0 0;
     }
 
     40% {
-        background: var(--gray-5);
-        box-shadow: -9px 4px var(--gray-3), 9px 4px var(--gray-3);
+        background: var(--gray-300);
+        box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
         translate: 0 -4px;
     }
 
     60% {
-        background: var(--gray-3);
-        box-shadow: -9px 0 var(--gray-3), 9px -4px var(--gray-5);
+        background: var(--gray-200);
+        box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
         translate: 0 0;
     }
 }

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

@@ -22,8 +22,8 @@
     display: flex;
     top: 0;
     align-items: center;
-    background: var(--gray-1);
-    border-bottom: 1px solid var(--gray-2);
+    background: var(--gray-50);
+    border-bottom: 1px solid var(--surface-stroke);
     z-index: 1;
 }
 
@@ -54,7 +54,7 @@
     }
 
     @include mixin.hover {
-        color: var(--primary-7);
+        color: var(--primary-600);
     }
 }
 
@@ -75,7 +75,7 @@
     transition-property: background, border-radius, color, opacity;
 
     @include mixin.hover {
-        background: var(--gray-2);
+        background: var(--gray-100);
         color: var(--foreground-prominent);
     }
 
@@ -89,21 +89,21 @@
     }
 
     &.isSelected {
-        background: var(--primary-7);
-        color: var(--primary-1);
+        background: var(--primary-600);
+        color: var(--primary-50);
         font-weight: 700;
     }
 
     &.isRangeEntry {
-        background: var(--primary-3);
+        background: var(--primary-200);
         border-radius: 0;
-        color: var(--primary-11);
+        color: var(--primary-950);
     }
 
     &.isRangeEnd,
     &.isRangeStart {
-        background: var(--primary-7);
-        color: var(--primary-1);
+        background: var(--primary-600);
+        color: var(--primary-50);
         font-weight: 700;
     }
 
@@ -120,14 +120,14 @@
     }
 
     &.isSelectionEntry {
-        background: var(--gray-2);
+        background: var(--gray-100);
         border-radius: 0;
         color: var(--foreground-prominent);
     }
 
     &.isSelectionEnd,
     &.isSelectionStart {
-        background: var(--gray-3);
+        background: var(--gray-200);
         font-weight: 700;
     }
 

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

@@ -59,11 +59,11 @@
 .dividerLine {
     height: 1px;
     content: '';
-    background: var(--gray-2);
+    background: var(--gray-100);
 }
 
 .separator {
-    background: var(--gray-2);
+    background: var(--gray-200);
 }
 
 .separatorHorizontal {

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

@@ -14,8 +14,8 @@
     }
 
     &:has(.dropZoneContent > .placeholder) {
-        --dz-fill: var(--gray-1);
-        --dz-stroke: var(--gray-3);
+        --dz-fill: var(--gray-50);
+        --dz-stroke: var(--gray-200);
     }
 }
 
@@ -71,12 +71,12 @@
 }
 
 .isDragging .dropZoneContent {
-    --dz-stroke: var(--primary-7);
+    --dz-stroke: var(--primary-600);
 }
 
 .isDraggingOver .dropZoneContent {
     &:has(.placeholder) {
-        --dz-fill: var(--primary-2);
+        --dz-fill: var(--primary-100);
     }
 
     .dropZoneBorder rect {
@@ -90,7 +90,7 @@
     inset: var(--dz-inset);
     align-items: center;
     justify-content: center;
-    background: oklch(from var(--gray-1) l c h / .84);
+    background: rgb(from var(--gray-50) r g b / .84);
     backdrop-filter: blur(3px) saturate(180%);
     border-radius: var(--dz-radius);
     z-index: 100;

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

@@ -28,7 +28,7 @@
     @include mixin.focus-ring();
 
     @include mixin.hover {
-        background: var(--gray-1);
+        background: var(--surface-hover);
     }
 
     :is(span) {
@@ -87,15 +87,15 @@
     flex-flow: column;
 
     .expandable + .expandable {
-        border-top: 1px solid var(--gray-2);
+        border-top: 1px solid var(--surface-stroke);
     }
 
     &:not(:first-child) {
-        border-top: 1px solid var(--gray-2);
+        border-top: 1px solid var(--surface-stroke);
     }
 
     &:not(:last-child) {
-        border-bottom: 1px solid var(--gray-2);
+        border-bottom: 1px solid var(--surface-stroke);
     }
 }
 

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

@@ -2,7 +2,7 @@
     max-height: 50dvh;
     max-width: 100%;
     padding: 9px;
-    width: 330px;
+    width: 300px;
     overflow: auto;
     scrollbar-width: none;
     transition: height 150ms var(--deceleration-curve);
@@ -45,8 +45,8 @@
     margin: -9px -9px 3px;
     padding: 9px;
     top: -9px;
-    background: var(--gray-0);
-    border-bottom: 1px solid var(--gray-2);
+    background: var(--surface);
+    border-bottom: 1px solid var(--surface-stroke);
     z-index: 2;
 
     &:first-child {
@@ -73,6 +73,17 @@
     top: 52px;
     margin: -9px -9px 0;
     padding: 9px;
-    background: linear-gradient(to bottom, var(--gray-0) 75%, transparent);
+    background: linear-gradient(to bottom, var(--surface) 75%, transparent);
     z-index: 1;
 }
+
+.filterBar {
+    display: flex;
+    flex-flow: row nowrap;
+    flex-grow: 1;
+    gap: 15px;
+}
+
+.filterBarSearch {
+    max-width: 300px;
+}

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

@@ -6,7 +6,7 @@
     top: var(--pane-y);
     left: var(--pane-x);
     margin: 0;
-    padding: 12px;
+    padding: 24px;
     background: unset;
     border: 0;
     font-size: 1rem;