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

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

@@ -1,132 +1,117 @@
 @use '$flux/css/mixin';
 
-@value button, buttonIcon, buttonLabel, isSmall, isMedium, isLarge, isXl from './base/Button.module.scss';
-
 .primaryButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--primary-7));
-    border-color: rgb(var(--primary-9));
-    box-shadow: 0 1px 1px rgb(var(--primary-7) / .25);
-    color: rgb(var(--primary-0));
+    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);
 
     @include mixin.hover {
-        background: rgb(var(--primary-8));
+        background: var(--primary-8);
+        border-color: var(--primary-9);
     }
 
     &:active {
-        background: rgb(var(--primary-9));
+        background: var(--primary-9);
         scale: .9875;
     }
 
     .spinner {
-        --track: rgb(var(--primary-8));
-        --value: rgb(var(--primary-0));
+        --track: var(--primary-8);
+        --value: var(--primary-0);
     }
 }
 
 .primaryButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--primary-0));
+    color: var(--primary-0);
 }
 
 .primaryButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .secondaryButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--gray-0));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-0);
+    border-color: var(--gray-2);
     color: var(--foreground);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-1);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
-        border-color: rgb(var(--gray-4));
+        background: var(--gray-2);
+        border-color: var(--gray-3);
         scale: .9875;
     }
 }
 
 .secondaryButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: var(--foreground-prominent);
 }
 
 .secondaryButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .destructiveButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--gray-0));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-0);
+    border-color: var(--gray-2);
     color: var(--foreground);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-1);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
-        border-color: rgb(var(--gray-4));
+        background: var(--gray-2);
+        border-color: var(--gray-3);
         scale: .9875;
     }
 
     .spinner {
-        --value: rgb(var(--danger-7));
+        --value: var(--danger-7);
     }
 }
 
 .destructiveButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--danger-7));
+    color: var(--danger-7);
 }
 
 .destructiveButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 
     &:only-child {
-        color: rgb(var(--danger-7));
-    }
-}
-
-[dark] .secondaryButton,
-[dark] .destructiveButton {
-    background: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-3));
-
-    @include mixin.hover {
-        background: rgb(var(--gray-2));
-    }
-
-    &:active {
-        background: rgb(var(--gray-3));
+        color: var(--danger-7);
     }
 }
 
 .secondaryButton,
 .destructiveButton {
-    box-shadow: var(--shadow-px), inset 0 -1px rgb(var(--gray-3) / .3);
+    box-shadow: var(--shadow-px), inset 0 -1px oklch(from var(--gray-3) l c h / .15);
 }
 
 .linkButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     display: inline-flex;
     height: unset;
     padding: 0;
     border: 0;
     box-shadow: unset;
-    color: rgb(var(--primary-7));
+    color: var(--primary-7);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 4px;
@@ -134,7 +119,7 @@
     @include mixin.focus-ring(6px);
 
     @include mixin.hover {
-        color: rgb(var(--primary-10));
+        color: var(--primary-10);
 
         .linkButtonIcon {
             transform: translate3d(6px, 0, 0);
@@ -143,9 +128,9 @@
 }
 
 .linkButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--primary-7));
+    color: var(--primary-7);
     transition: inherit;
     transition-property: transform;
 
@@ -155,7 +140,7 @@
 }
 
 .linkButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .publishButton {

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

@@ -1,7 +1,7 @@
-@value basePaneStructure, basePaneLoader from './base/Pane.module.scss';
+@use '$flux/css/mixin';
 
 .calendar {
-    composes: basePaneStructure;
+    composes: basePaneStructure from './base/Pane.module.scss';
 
     display: flex;
     flex-flow: column;
@@ -14,7 +14,7 @@
 }
 
 .calendarLoader {
-    composes: basePaneLoader;
+    composes: basePaneLoader from './base/Pane.module.scss';
 }
 
 .calendarCurrent {
@@ -32,10 +32,8 @@
     line-height: 1.5em;
     text-transform: capitalize;
 
-    @media (hover: hover) {
-        &:hover {
-            color: rgb(var(--primary-7));
-        }
+    @include mixin.hover {
+        color: var(--primary-7);
     }
 }
 
@@ -58,12 +56,12 @@
     gap: 1px;
     grid-template-columns: repeat(7, 1fr);
     grid-template-rows: min-content repeat(6, auto);
-    background: rgb(var(--gray-2));
+    background: var(--gray-1);
 }
 
 .calendarCell {
     padding: 12px 21px;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
 }
 
 .calendarDay {
@@ -87,7 +85,7 @@
     padding-bottom: 39px;
 
     &.isDisabled {
-        background: rgb(var(--gray-1));
+        background: oklch(from var(--gray-0) l c h / .5);
         color: var(--foreground-secondary);
         pointer-events: none;
 
@@ -122,9 +120,9 @@
     margin-left: -9px;
     margin-right: -9px;
     padding: 6px 9px;
-    background: rgb(var(--primary-2));
+    background: var(--primary-2);
     border: 0;
-    color: rgb(var(--primary-9));
+    color: var(--primary-9);
     cursor: pointer;
     font-size: 14px;
     line-height: 1.3em;
@@ -163,9 +161,7 @@
         }
     }
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-3));
-        }
+    @include mixin.hover {
+        background: var(--primary-3);
     }
 }

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

@@ -7,8 +7,8 @@
     align-items: center;
     flex-grow: 0;
     gap: 9px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--gray-1);
+    border: 1px solid var(--gray-2);
     border-radius: 99px;
     color: var(--foreground);
     transition: 180ms var(--swift-out);
@@ -21,19 +21,21 @@
 
         @media (hover: hover) {
             &:hover {
-                background: rgb(var(--gray-2));
+                background: var(--gray-2);
+                border-color: var(--gray-3);
             }
         }
     }
 
     &.isSelected {
-        background: rgb(var(--primary-2));
-        border-color: rgb(var(--primary-4));
-        color: rgb(var(--primary-7));
+        background: var(--primary-2);
+        border-color: var(--primary-3);
+        color: var(--primary-7);
 
         @media (hover: hover) {
             &:hover {
-                background: rgb(var(--primary-3));
+                background: var(--primary-3);
+                border-color: var(--primary-4);
             }
         }
     }
@@ -44,15 +46,3 @@
         white-space: nowrap;
     }
 }
-
-[dark] .chip.isSelected {
-    background: rgb(var(--primary-11) / .5);
-    border-color: rgb(var(--primary-11));
-    color: rgb(var(--primary-5));
-
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-10) / .5);
-        }
-    }
-}

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;
@@ -20,6 +43,7 @@
     inset: var(--dz-inset);
     height: var(--dz-height);
     width: var(--dz-width);
+    max-width: unset;
     overflow: visible;
     pointer-events: none;
 
@@ -35,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 {
@@ -86,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

@@ -1,7 +1,5 @@
 @use '$flux/css/mixin';
 
-@value basePane from './base/Pane.module.scss';
-
 .expandable {
     display: flex;
     flex-flow: column;
@@ -30,7 +28,7 @@
     @include mixin.focus-ring();
 
     @include mixin.hover {
-        background: rgb(var(--gray-1));
+        background: var(--gray-1);
     }
 
     :is(span) {
@@ -71,15 +69,15 @@
     padding: 0 21px 21px;
 }
 
-:local(.basePane) > .expandable {
+.basePane > .expandable {
     border-radius: inherit;
 }
 
-:local(.basePane) > .expandable .expandableHeader {
+.basePane > .expandable .expandableHeader {
     border-radius: inherit;
 }
 
-:local(.basePane) > .expandableOpened .expandableHeader {
+.basePane > .expandableOpened .expandableHeader {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -89,24 +87,24 @@
     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);
     }
 }
 
-:local(.basePane) > .expandableGroup:first-child .expandable:first-child .expandableHeader {
+.basePane > .expandableGroup:first-child .expandable:first-child .expandableHeader {
     border-top-left-radius: var(--radius);
     border-top-right-radius: var(--radius);
 }
 
-:local(.basePane) > .expandableGroup:last-child .expandable:not(.expandableOpened):last-child .expandableHeader {
+.basePane > .expandableGroup:last-child .expandable:not(.expandableOpened):last-child .expandableHeader {
     border-bottom-left-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
 }