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

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

@@ -50,11 +50,11 @@
     text-align: left;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-1);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
+        background: var(--gray-2);
     }
 }
 
@@ -79,58 +79,46 @@
 }
 
 .menuItemActive {
-    background: rgb(var(--primary-7));
-    color: rgb(var(--primary-1));
+    background: var(--primary-7);
+    color: var(--primary-1);
 
     .menuItemIcon {
-        color: rgb(var(--primary-0));
+        color: var(--primary-0);
     }
 
     @include mixin.hover {
-        background: rgb(var(--primary-7));
+        background: var(--primary-7);
     }
 
     &:active {
-        background: rgb(var(--primary-7));
+        background: var(--primary-7);
     }
 }
 
 .menuItemDestructive {
     .menuItemIcon {
-        color: rgb(var(--danger-8));
+        color: var(--danger-8);
     }
 
     .menuItemLabel {
-        color: rgb(var(--danger-8));
+        color: var(--danger-8);
     }
 }
 
 .menuItemHighlighted {
-    background: rgb(var(--primary-2));
-    color: rgb(var(--primary-7));
+    background: var(--primary-2);
+    color: var(--primary-7);
 
     .menuItemIcon {
-        color: rgb(var(--primary-8));
+        color: var(--primary-8);
     }
 
     @include mixin.hover {
-        background: rgb(var(--primary-2));
+        background: var(--primary-2);
     }
 
     &:active {
-        background: rgb(var(--primary-2));
-    }
-}
-
-[dark] .menuItemHighlighted {
-    background: rgb(var(--primary-11) / .5);
-
-    @include mixin.hover {
-        background: rgb(var(--primary-11) / .5);
-    }
-
-    &:active {
-        background: rgb(var(--primary-11) / .5);
+        background: var(--primary-2);
     }
 }
 
@@ -143,7 +131,7 @@
 }
 
 .menuItemSelected .menuItemSelectableIcon {
-    color: rgb(var(--primary-7));
+    color: var(--primary-7);
 }
 
 .menuItemCommand {
@@ -171,7 +159,7 @@
 
 .menuItemActive .menuItemCommand,
 .menuItemActive .menuItemCommandIcon {
-    color: rgb(var(--primary-4));
+    color: var(--primary-4);
 }
 
 .menuItemImage {
@@ -207,7 +195,7 @@
     padding: 12px 12px 6px;
     align-items: center;
     gap: 9px;
-    background: linear-gradient(to bottom, rgb(var(--gray-0)) 75%, transparent);
+    background: linear-gradient(to bottom, var(--gray-0) 75%, transparent);
     font-size: 14px;
     pointer-events: none;
     z-index: 1;
@@ -243,7 +231,7 @@
         bottom: 12px;
         width: 4px;
         content: '';
-        background: rgb(var(--primary-7));
+        background: var(--primary-7);
         border-radius: 99px;
         opacity: 0;
         transition: opacity 180ms var(--swift-out);
@@ -254,7 +242,7 @@
     min-height: 48px;
 
     &::after {
-        background: rgb(var(--primary-0));
+        background: var(--primary-0);
     }
 }
 
@@ -264,7 +252,7 @@
     }
 
     &.menuItemIndented {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
 
         .menuItemIcon,
         .menuItemLabel {

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

@@ -108,12 +108,12 @@
 .noticeGray {
     composes: notice;
 
-    background: rgb(var(--gray-2));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-1);
+    border-color: var(--gray-2);
     color: var(--foreground);
 
     .noticeClose {
-        background: rgb(var(--gray-3));
+        background: var(--gray-3);
     }
 
     .noticePrefix,
@@ -125,150 +125,150 @@
 .noticePrimary {
     composes: notice;
 
-    background: rgb(var(--primary-2));
-    border-color: rgb(var(--primary-3));
-    color: rgb(var(--primary-11));
+    background: var(--primary-2);
+    border-color: var(--primary-3);
+    color: var(--primary-11);
 
     .noticeClose {
-        background: rgb(var(--primary-3));
+        background: var(--primary-3);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--primary-7));
+        color: var(--primary-7);
     }
 
     :local(.button) {
-        border-color: rgb(var(--primary-4));
+        border-color: var(--primary-4);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--primary-3));
+        stroke: var(--primary-3);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--primary-7));
+        stroke: var(--primary-7);
     }
 }
 
 .noticeDanger {
     composes: notice;
 
-    background: rgb(var(--danger-2));
-    border-color: rgb(var(--danger-3));
-    color: rgb(var(--danger-11));
+    background: var(--danger-2);
+    border-color: var(--danger-3);
+    color: var(--danger-11);
 
     .noticeClose {
-        background: rgb(var(--danger-3));
+        background: var(--danger-3);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--danger-7));
+        color: var(--danger-7);
     }
 
     :local(.button) {
-        border-color: rgb(var(--danger-4));
+        border-color: var(--danger-4);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--danger-3));
+        stroke: var(--danger-3);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--danger-7));
+        stroke: var(--danger-7);
     }
 }
 
 .noticeInfo {
     composes: notice;
 
-    background: rgb(var(--info-2));
-    border-color: rgb(var(--info-3));
-    color: rgb(var(--info-11));
+    background: var(--info-2);
+    border-color: var(--info-3);
+    color: var(--info-11);
 
     .noticeClose {
-        background: rgb(var(--info-3));
+        background: var(--info-3);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--info-7));
+        color: var(--info-7);
     }
 
     :local(.button) {
-        border-color: rgb(var(--info-4));
+        border-color: var(--info-4);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--info-3));
+        stroke: var(--info-3);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--info-7));
+        stroke: var(--info-7);
     }
 }
 
 .noticeSuccess {
     composes: notice;
 
-    background: rgb(var(--success-2));
-    border-color: rgb(var(--success-3));
-    color: rgb(var(--success-11));
+    background: var(--success-2);
+    border-color: var(--success-3);
+    color: var(--success-11);
 
     .noticeClose {
-        background: rgb(var(--success-3));
+        background: var(--success-3);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--success-7));
+        color: var(--success-7);
     }
 
     :local(.button) {
-        border-color: rgb(var(--success-4));
+        border-color: var(--success-4);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--success-3));
+        stroke: var(--success-3);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--success-7));
+        stroke: var(--success-7);
     }
 }
 
 .noticeWarning {
     composes: notice;
 
-    background: rgb(var(--warning-2));
-    border-color: rgb(var(--warning-3));
-    color: rgb(var(--warning-11));
+    background: var(--warning-2);
+    border-color: var(--warning-3);
+    color: var(--warning-11);
 
     .noticeClose {
-        background: rgb(var(--warning-3));
+        background: var(--warning-3);
     }
 
     .noticePrefix,
     .noticeTitle {
-        color: rgb(var(--warning-7));
+        color: var(--warning-7);
     }
 
     :local(.button) {
-        border-color: rgb(var(--warning-4));
+        border-color: var(--warning-4);
     }
 
     :local(.spinnerTrack) {
-        stroke: rgb(var(--warning-3));
+        stroke: var(--warning-3);
     }
 
     :local(.spinnerEffect),
     :local(.spinnerValue) {
-        stroke: rgb(var(--warning-7));
+        stroke: var(--warning-7);
     }
 }
 

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

@@ -4,7 +4,7 @@
     inset: 0;
     height: 100dvh;
     width: 100dvw;
-    background: rgb(var(--gray-8) / .5);
+    background: oklch(from var(--gray-11) l c h / .6);
     backdrop-filter: blur(3px) saturate(180%);
     z-index: 10000;
 
@@ -26,7 +26,7 @@
 }
 
 [dark] .overlay {
-    background: rgb(0 0 0 / .5);
+    background: rgb(0 0 0 / .6);
 }
 
 .overlaySmall {
@@ -74,7 +74,7 @@
         > .paneHeader {
             top: 0;
             padding-bottom: 21px;
-            border-bottom: 1px solid rgb(var(--gray-2));
+            border-bottom: 1px solid var(--gray-1);
             box-shadow: var(--shadow-xs);
 
             &:has(+ :where(.tabs, .tabBar)) {

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

@@ -12,12 +12,17 @@
     min-width: 36px;
     padding: 0 6px;
     background: unset;
-    border-color: transparent;
-    box-shadow: none !important;
+
+    &:local(.secondaryButton) {
+        border-color: transparent;
+        box-shadow: none;
+    }
 }
 
 .paginationButtonArrow {
-    border-color: rgb(var(--gray-3));
+    &:local(.secondaryButton) {
+        border-color: var(--gray-2);
+    }
 
     &:first-child {
         margin-right: 6px;
@@ -28,9 +33,9 @@
     }
 }
 
-.paginationButtonCurrent {
-    background: rgb(var(--primary-1));
-    border-color: rgb(var(--primary-3));
+.paginationButton.paginationButtonCurrent {
+    background: var(--primary-1);
+    border-color: var(--primary-3);
 }
 
 .paginationButtonSpacer {

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

@@ -15,7 +15,7 @@
 .paneWell {
     composes: pane;
 
-    background: rgb(var(--gray-1));
+    background: var(--gray-1);
 }
 
 .paneHeader {
@@ -56,7 +56,7 @@
 
 .paneHeaderIcon {
     margin-top: 2px;
-    color: rgb(var(--primary-7));
+    color: var(--primary-7);
 }
 
 .paneBody {
@@ -75,8 +75,8 @@
     display: flex;
     padding: 21px;
     gap: 9px;
-    background: rgb(var(--gray-1));
-    border-top: 1px solid rgb(var(--gray-2));
+    background: var(--gray-0);
+    border-top: 1px solid var(--gray-1);
 }
 
 .paneLoader {
@@ -88,9 +88,9 @@
     top: 15px;
     right: 15px;
     padding: 6px 9px;
-    background: rgb(var(--gray-10));
+    background: var(--gray-10);
     border-radius: calc(var(--radius) / 2);
-    color: rgb(var(--gray-0));
+    color: var(--gray-0);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1px;
@@ -150,7 +150,7 @@
 }
 
 .paneGroup + .paneGroup {
-    border-top: 1px solid rgb(var(--gray-11) / .05);
+    border-top: 1px solid oklch(from var(--gray-11) l c h / .05);
 }
 
 .paneIllustration {

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

@@ -7,8 +7,8 @@
     flex: 1 0 auto;
     flex-flow: column;
     justify-content: center;
-    background: rgb(var(--gray-1));
-    border: 1px dashed rgb(var(--gray-3));
+    background: var(--gray-1);
+    border: 2px dashed var(--gray-3);
     border-radius: var(--radius);
     text-align: center;
     user-select: none;
@@ -17,7 +17,7 @@
         cursor: pointer;
 
         @include mixin.hover {
-            background: rgb(var(--gray-2));
+            background: var(--gray-2);
         }
     }
 
@@ -67,6 +67,6 @@
 }
 
 .placeholderIcon {
-    color: rgb(var(--primary-7));
+    color: var(--primary-7);
     font-size: 20px;
 }

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

@@ -5,9 +5,9 @@
 .progressBarTrack {
     position: relative;
     height: 9px;
-    background: rgb(var(--gray-2));
+    background: var(--gray-1);
     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-2);
     contain: paint;
 }
 
@@ -16,7 +16,7 @@
     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: linear-gradient(to right, var(--primary-7) 20%, var(--primary-6), var(--primary-7) 80%);
     background-size: 150px 100%;
     border-radius: inherit;
     animation: progressBarValue 1s linear infinite;
@@ -26,7 +26,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-7) 20%, var(--primary-6), var(--primary-7) 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));
+    background: var(--danger-7);
+    border: 3px solid var(--gray-0);
     border-radius: 99px;
-    color: rgb(var(--danger-0));
+    color: var(--danger-0);
     cursor: pointer;
     transition: 300ms var(--swift-out);
     transition-property: background, opacity, scale;
 
     @include mixin.hover {
-        background: rgb(var(--danger-8));
+        background: var(--danger-8);
     }
 
     &.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-1);
+    border: 1px solid var(--gray-2);
     border-radius: var(--radius);
 }
 
@@ -26,10 +26,10 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
     border-radius: var(--radius);
     box-shadow: var(--shadow-sm);
-    outline: 1px solid rgb(var(--gray-3));
+    outline: 1px solid var(--gray-2);
     pointer-events: none;
     transition: 300ms var(--swift-out);
     transition-property: left, width;
@@ -55,7 +55,7 @@
     transition-property: background, color;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
     }
 
     &.isActive {
@@ -73,7 +73,7 @@
     height: 15px;
     width: 1px;
     flex-shrink: 0;
-    background: rgb(var(--gray-3));
+    background: var(--gray-2);
     transition: opacity 300ms var(--swift-out);
 
     &.isActive {

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

@@ -65,7 +65,7 @@
     align-items: center;
     justify-content: center;
     flex-grow: 1;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
     border: 0;
     border-radius: 0;
     color: var(--foreground);
@@ -78,22 +78,27 @@
     transition-property: background, color;
 
     &:hover {
-        background: rgb(var(--gray-1));
+        background: var(--gray-1);
         color: var(--foreground-prominent);
     }
 
+    &:first-child {
+        font-weight: 600;
+    }
+
     &:active {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
     }
 }
 
 .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(--gray-2);
 }
 
 .snackbarGray {
@@ -112,12 +117,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--primary-7));
+        color: var(--primary-7);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--primary-8));
+        stroke: var(--primary-8);
     }
 }
 
@@ -127,12 +132,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--danger-7));
+        color: var(--danger-7);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--danger-8));
+        stroke: var(--danger-8);
     }
 }
 
@@ -142,12 +147,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--info-7));
+        color: var(--info-7);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--info-8));
+        stroke: var(--info-8);
     }
 }
 
@@ -157,12 +162,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--success-7));
+        color: var(--success-7);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--success-8));
+        stroke: var(--success-8);
     }
 }
 
@@ -172,12 +177,12 @@
     .snackbarAction:first-child,
     .snackbarContent > .icon,
     .snackbarTitle {
-        color: rgb(var(--warning-7));
+        color: var(--warning-7);
     }
 
     .spinnerEffect,
     .spinnerValue {
-        stroke: rgb(var(--warning-8));
+        stroke: var(--warning-8);
     }
 }
 

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-2);
+    --value: var(--primary-7);
 
     display: inline-block;
     height: 1em;