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

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

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

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

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

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

@@ -22,8 +22,8 @@
     display: flex;
     top: 0;
     align-items: center;
-    background: rgb(var(--gray-1));
-    border-bottom: 1px solid rgb(var(--gray-2));
+    background: var(--gray-1);
+    border-bottom: 1px solid var(--gray-2);
     z-index: 1;
 }
 
@@ -54,7 +54,7 @@
     }
 
     @include mixin.hover {
-        color: rgb(var(--primary-7));
+        color: var(--primary-7);
     }
 }
 
@@ -75,7 +75,7 @@
     transition-property: background, border-radius, color, opacity;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
         color: var(--foreground-prominent);
     }
 
@@ -89,35 +89,24 @@
     }
 
     &.isSelected {
-        background: rgb(var(--primary-7));
-        color: rgb(var(--primary-1));
+        background: var(--primary-7);
+        color: var(--primary-1);
         font-weight: 700;
     }
 
     &.isRangeEntry {
-        background: rgb(var(--primary-3));
+        background: var(--primary-3);
         border-radius: 0;
-        color: rgb(var(--primary-11));
+        color: var(--primary-11);
     }
 
     &.isRangeEnd,
     &.isRangeStart {
-        background: rgb(var(--primary-7));
-        color: rgb(var(--primary-1));
+        background: var(--primary-7);
+        color: var(--primary-1);
         font-weight: 700;
     }
 
-    [dark] &.isRangeEntry {
-        background: rgb(var(--primary-7) / .75);
-        color: rgb(0 0 0 / .975);
-    }
-
-    [dark] &.isRangeStart,
-    [dark] &.isRangeEnd {
-        background: rgb(var(--primary-7));
-        color: rgb(0 0 0 / .975);
-    }
-
     &.isRangeEntry:nth-child(7n + 8),
     &.isRangeStart {
         border-top-left-radius: var(--radius);
@@ -131,14 +120,14 @@
     }
 
     &.isSelectionEntry {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
         border-radius: 0;
         color: var(--foreground-prominent);
     }
 
     &.isSelectionEnd,
     &.isSelectionStart {
-        background: rgb(var(--gray-3));
+        background: var(--gray-3);
         font-weight: 700;
     }
 

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

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

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

@@ -1,3 +1,26 @@
+.dropZone {
+    --dz-fill: transparent;
+    --dz-stroke: transparent;
+    --dz-inset: -1px;
+    --dz-radius: var(--radius);
+    --dz-height: calc(100% + 2px);
+    --dz-width: calc(100% + 2px);
+
+    position: relative;
+
+    &:has(.dropZoneContent > .avatar) {
+        --dz-inset: -3px;
+        --dz-radius: 999px;
+        --dz-height: calc(100% + 6px);
+        --dz-width: calc(100% + 6px);
+    }
+
+    &:has(.dropZoneContent > .placeholder) {
+        --dz-fill: var(--gray-1);
+        --dz-stroke: var(--gray-3);
+    }
+}
+
 .dropZone {
     display: grid;
     align-items: center;
@@ -36,44 +59,23 @@
 }
 
 .dropZoneContent {
-    --dz-fill: transparent;
-    --dz-stroke: transparent;
-    --dz-inset: -1px;
-    --dz-radius: var(--radius);
-    --dz-height: calc(100% + 2px);
-    --dz-width: calc(100% + 2px);
-
-    position: relative;
-
-    &:has(.avatar) {
-        --dz-inset: -3px;
-        --dz-radius: 999px;
-        --dz-height: calc(100% + 6px);
-        --dz-width: calc(100% + 6px);
-    }
-
-    &:has(.placeholder) {
-        --dz-fill: rgb(var(--gray-1));
-        --dz-stroke: rgb(var(--gray-3));
-    }
-
-    :local(.avatar) {
+    > :local(.avatar) {
         display: block;
     }
 
-    :local(.placeholder) {
+    > :local(.placeholder) {
         background: transparent;
         border: 0;
     }
 }
 
 .isDragging .dropZoneContent {
-    --dz-stroke: rgb(var(--primary-7));
+    --dz-stroke: var(--primary-7);
 }
 
 .isDraggingOver .dropZoneContent {
     &:has(.placeholder) {
-        --dz-fill: rgb(var(--primary-2));
+        --dz-fill: var(--primary-2);
     }
 
     .dropZoneBorder rect {
@@ -87,7 +89,7 @@
     inset: var(--dz-inset);
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-1) / .84);
+    background: oklch(from var(--gray-1) l c h / .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: rgb(var(--gray-1));
+        background: var(--gray-1);
     }
 
     :is(span) {
@@ -87,15 +87,15 @@
     flex-flow: column;
 
     .expandable + .expandable {
-        border-top: 1px solid rgb(var(--gray-2));
+        border-top: 1px solid var(--gray-2);
     }
 
     &:not(:first-child) {
-        border-top: 1px solid rgb(var(--gray-2));
+        border-top: 1px solid var(--gray-2);
     }
 
     &:not(:last-child) {
-        border-bottom: 1px solid rgb(var(--gray-2));
+        border-bottom: 1px solid var(--gray-2);
     }
 }
 

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

@@ -45,8 +45,8 @@
     margin: -9px -9px 3px;
     padding: 9px;
     top: -9px;
-    background: rgb(var(--gray-0));
-    border-bottom: 1px solid rgb(var(--gray-2));
+    background: var(--gray-0);
+    border-bottom: 1px solid var(--gray-2);
     z-index: 2;
 
     &:first-child {
@@ -73,6 +73,6 @@
     top: 52px;
     margin: -9px -9px 0;
     padding: 9px;
-    background: linear-gradient(to bottom, rgb(var(--gray-0)) 75%, transparent);
+    background: linear-gradient(to bottom, var(--gray-0) 75%, transparent);
     z-index: 1;
 }

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

@@ -126,7 +126,7 @@
 .formFieldAdditionError {
     composes: formFieldAddition;
 
-    color: rgb(var(--danger-7));
+    color: var(--danger-7);
 }
 
 .formFieldAdditionHint {
@@ -146,9 +146,9 @@
     width: 100%;
     padding: 0 12px;
     align-self: start;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
     background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--gray-2);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     color: var(--foreground);
@@ -160,7 +160,7 @@
     }
 
     &.isSecondary {
-        background: rgb(var(--gray-2));
+        background: var(--gray-1);
         border-color: transparent;
         box-shadow: none;
     }
@@ -169,7 +169,7 @@
 .formInputDisabled {
     composes: formInput;
 
-    background: rgb(var(--gray-2));
+    background: var(--gray-2);
     cursor: not-allowed;
 
     input {
@@ -183,7 +183,7 @@
     @include mixin.focus-ring(-1px, true);
 
     @include mixin.hover {
-        border-color: rgb(var(--gray-4));
+        border-color: var(--gray-3);
     }
 }
 
@@ -271,20 +271,20 @@
     align-items: center;
     flex-grow: 0;
     justify-content: center;
-    background: rgb(var(--gray-1));
+    background: var(--gray-1);
     color: var(--foreground-secondary);
     pointer-events: none;
 
     &:has(+ .formInput .formInputNative) {
-        border-right: 1px solid rgb(var(--gray-3));
+        border-right: 1px solid var(--gray-2);
     }
 
     + .formInputAddition {
-        border-left: 1px solid rgb(var(--gray-3));
+        border-left: 1px solid var(--gray-2);
     }
 
     @at-root .formInput:has(.formInputNative) + & {
-        border-left: 1px solid rgb(var(--gray-3));
+        border-left: 1px solid var(--gray-2);
     }
 }
 
@@ -301,7 +301,7 @@
 
         + :is(.button, .buttonGroup) {
             margin: 0;
-            border-left: 1px solid rgb(var(--gray-3));
+            border-left: 1px solid var(--gray-2);
         }
     }
 
@@ -310,7 +310,7 @@
 
         + .button {
             margin: 0;
-            border-left: 1px solid rgb(var(--gray-3));
+            border-left: 1px solid var(--gray-2);
         }
     }
 
@@ -332,11 +332,11 @@
 
         .secondaryButton {
             background: transparent;
-            border-color: rgb(var(--gray-3));
+            border-color: var(--gray-2);
             box-shadow: none;
 
             @include mixin.hover {
-                background: rgb(var(--gray-3));
+                background: var(--gray-3);
             }
         }
     }
@@ -398,7 +398,7 @@
         @include mixin.focus-ring(-1px, true);
 
         @include mixin.hover {
-            border-color: rgb(var(--gray-4));
+            border-color: var(--gray-4);
         }
     }
 
@@ -430,7 +430,7 @@
     top: 0;
     height: 48px;
     margin-bottom: 9px;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
     border-top: 0;
     border-left: 0;
     border-right: 0;
@@ -507,8 +507,8 @@
 }
 
 .isDisabled .formSelectSelected {
-    background: rgb(var(--gray-2));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--gray-2);
+    border: 1px solid var(--gray-3);
     color: var(--foreground-secondary);
     opacity: 1;
 }
@@ -556,10 +556,10 @@
     padding: 0;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-3));
+    background: var(--gray-2);
     border: 0;
     border-radius: calc(var(--radius) / 2);
-    color: rgb(var(--primary-0));
+    color: var(--primary-0);
     cursor: pointer;
     pointer-events: none;
     transition: 210ms var(--swift-out);
@@ -590,12 +590,12 @@
 
     @include mixin.hover {
         + .checkboxElement {
-            background: rgb(var(--gray-4));
+            background: var(--gray-3);
         }
     }
 
     &:is(:checked, :indeterminate) + .checkboxElement {
-        background: rgb(var(--primary-7));
+        background: var(--primary-7);
 
         .icon {
             opacity: 1;
@@ -611,7 +611,7 @@
     min-width: max-content;
     align-self: center;
     justify-self: center;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--gray-2);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     overflow: hidden;
@@ -619,7 +619,7 @@
     @include mixin.focus-ring-transition(2px, true);
 
     @include mixin.hover {
-        border-color: rgb(var(--gray-4));
+        border-color: var(--gray-3);
     }
 }
 
@@ -654,7 +654,7 @@
     text-align: center;
 
     &:hover {
-        border-color: rgb(var(--gray-3));
+        border-color: var(--gray-3);
     }
 
     &,
@@ -690,7 +690,7 @@
     padding: 0;
     width: 2.7ch;
     background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--gray-3);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     font: inherit;
@@ -705,7 +705,7 @@
     composes: pinInput;
 
     .pinInputField {
-        background-color: rgb(var(--gray-0));
+        background-color: var(--gray-0);
         color: var(--foreground-prominent);
 
         @include mixin.focus-ring(-1px, true);
@@ -716,7 +716,7 @@
     composes: pinInput;
 
     .pinInputField {
-        background-color: rgb(var(--gray-2));
+        background-color: var(--gray-2);
         color: var(--foreground-secondary);
         cursor: not-allowed;
     }
@@ -728,7 +728,7 @@
     width: 54px;
     height: 30px;
     flex: 0 0 auto;
-    background: rgb(var(--gray-2));
+    background: var(--gray-2);
     border-radius: 99px;
     contain: paint;
 
@@ -738,10 +738,10 @@
         }
 
         &:not(.isSwitch) {
-            background: rgb(var(--primary-7));
+            background: var(--primary-7);
 
             .toggleIcon {
-                color: rgb(var(--primary-0));
+                color: var(--primary-0);
             }
 
             .toggleInput::after {
@@ -809,9 +809,9 @@
         height: 24px;
         width: 24px;
         content: '';
-        background: rgb(var(--gray-0));
+        background: var(--gray-0);
         background-clip: padding-box;
-        border: 1px solid rgb(var(--gray-3));
+        border: 1px solid var(--gray-3);
         border-radius: 99px;
         box-shadow: var(--shadow-sm);
     }

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

@@ -1,6 +1,15 @@
 @use '$flux/css/mixin';
 
 .gallery {
+    --dz-fill: transparent;
+    --dz-stroke: transparent;
+    --dz-inset: -3px;
+    --dz-radius: calc(var(--radius) + 3px);
+    --dz-height: calc(100% + 6px);
+    --dz-width: calc(100% + 6px);
+}
+
+.galleryGrid {
     display: grid;
     gap: 9px;
     grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
@@ -9,12 +18,13 @@
 .galleryAdd {
     composes: placeholder from './Placeholder.module.scss';
 
+    position: relative;
     aspect-ratio: 1 / 1;
-    color: rgb(var(--gray-7));
+    color: var(--gray-7);
 
     @include mixin.hover {
-        background: rgb(var(--gray-1));
-        border-color: rgb(var(--gray-3));
+        background: var(--gray-2);
+        border-color: var(--gray-3);
     }
 }
 

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

@@ -60,41 +60,41 @@
 .iconBoxedGray {
     composes: iconBoxedColored;
 
-    background: rgb(var(--gray-2));
+    background: var(--gray-2);
     color: var(--foreground);
 }
 
 .iconBoxedPrimary {
     composes: iconBoxedColored;
 
-    background: rgb(var(--primary-2));
-    color: rgb(var(--primary-10));
+    background: var(--primary-2);
+    color: var(--primary-10);
 }
 
 .iconBoxedDanger {
     composes: iconBoxedColored;
 
-    background: rgb(var(--danger-2));
-    color: rgb(var(--danger-10));
+    background: var(--danger-2);
+    color: var(--danger-10);
 }
 
 .iconBoxedInfo {
     composes: iconBoxedColored;
 
-    background: rgb(var(--info-2));
-    color: rgb(var(--info-10));
+    background: var(--info-2);
+    color: var(--info-10);
 }
 
 .iconBoxedSuccess {
     composes: iconBoxedColored;
 
-    background: rgb(var(--success-2));
-    color: rgb(var(--success-10));
+    background: var(--success-2);
+    color: var(--success-10);
 }
 
 .iconBoxedWarning {
     composes: iconBoxedColored;
 
-    background: rgb(var(--warning-2));
-    color: rgb(var(--warning-10));
+    background: var(--warning-2);
+    color: var(--warning-10);
 }

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

@@ -5,7 +5,7 @@
     > .icon {
         margin-top: 1px;
         flex-shrink: 0;
-        color: rgb(var(--primary-7));
+        color: var(--primary-7);
     }
 }