@flux-ui/components 3.0.0-next.3 → 3.0.0-next.31

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

@@ -3,30 +3,31 @@
 .primaryButton {
     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-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: rgb(var(--primary-8));
+        background: var(--primary-700);
+        border-color: var(--primary-800);
     }
 
     &:active {
-        background: rgb(var(--primary-9));
+        background: var(--primary-800);
         scale: .9875;
     }
 
     .spinner {
-        --track: rgb(var(--primary-8));
-        --value: rgb(var(--primary-0));
+        --track: var(--primary-700);
+        --value: var(--primary-25);
     }
 }
 
 .primaryButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--primary-0));
+    color: var(--primary-25);
 }
 
 .primaryButtonLabel {
@@ -36,17 +37,16 @@
 .secondaryButton {
     composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--gray-0));
-    border-color: rgb(var(--gray-3));
+    background: var(--surface);
+    border-color: var(--surface-stroke);
     color: var(--foreground);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--surface-hover);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
-        border-color: rgb(var(--gray-4));
+        background: var(--surface-active);
         scale: .9875;
     }
 }
@@ -54,7 +54,7 @@
 .secondaryButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: var(--foreground-prominent);
+    color: var(--foreground);
 }
 
 .secondaryButtonLabel {
@@ -64,56 +64,90 @@
 .destructiveButton {
     composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--gray-0));
-    border-color: rgb(var(--gray-3));
+    background: var(--surface);
+    border-color: var(--surface-stroke);
     color: var(--foreground);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--surface-hover);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
-        border-color: rgb(var(--gray-4));
+        background: var(--surface-active);
         scale: .9875;
     }
 
     .spinner {
-        --value: rgb(var(--danger-7));
+        --value: var(--danger-600);
     }
 }
 
 .destructiveButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--danger-7));
+    color: var(--danger-600);
 }
 
 .destructiveButtonLabel {
     composes: buttonLabel from './base/Button.module.scss';
 
     &:only-child {
-        color: rgb(var(--danger-7));
+        color: var(--danger-600);
     }
 }
 
-[dark] .secondaryButton,
-[dark] .destructiveButton {
-    background: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-3));
+.secondaryButton,
+.destructiveButton {
+    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: rgb(var(--gray-2));
+        background: var(--surface-hover);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
+        background: var(--surface-active);
+        scale: .9875;
     }
 }
 
-.secondaryButton,
-.destructiveButton {
-    box-shadow: var(--shadow-px), inset 0 -1px rgb(var(--gray-3) / .3);
+.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 {
@@ -124,7 +158,7 @@
     padding: 0;
     border: 0;
     box-shadow: unset;
-    color: rgb(var(--primary-7));
+    color: var(--primary-600);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 4px;
@@ -132,7 +166,7 @@
     @include mixin.focus-ring(6px);
 
     @include mixin.hover {
-        color: rgb(var(--primary-10));
+        color: var(--primary-900);
 
         .linkButtonIcon {
             transform: translate3d(6px, 0, 0);
@@ -143,7 +177,7 @@
 .linkButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(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: rgb(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: rgb(var(--gray-2));
+    background: var(--gray-100);
 }
 
 .calendarCell {
     padding: 12px 21px;
-    background: rgb(var(--gray-0));
+    background: var(--gray-25);
 }
 
 .calendarDay {
@@ -85,7 +85,7 @@
     padding-bottom: 39px;
 
     &.isDisabled {
-        background: rgb(var(--gray-1));
+        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: rgb(var(--primary-2));
+    background: var(--primary-100);
     border: 0;
-    color: rgb(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: rgb(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: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
     border-radius: 99px;
     color: var(--foreground);
     transition: 180ms var(--swift-out);
@@ -21,19 +21,19 @@
 
         @media (hover: hover) {
             &:hover {
-                background: rgb(var(--gray-2));
+                background: var(--gray-100);
             }
         }
     }
 
     &.isSelected {
-        background: rgb(var(--primary-2));
-        border-color: rgb(var(--primary-4));
-        color: rgb(var(--primary-7));
+        background: var(--primary-50);
+        border-color: var(--primary-200);
+        color: var(--primary-600);
 
         @media (hover: hover) {
             &:hover {
-                background: rgb(var(--primary-3));
+                background: var(--primary-100);
             }
         }
     }
@@ -44,15 +44,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 var(--surface-stroke-out);
     }
 }
 
@@ -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 var(--surface-stroke-out);
     }
 }
 
@@ -156,8 +156,8 @@
 .colorSelectCustom {
     composes: colorSelectItem;
 
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-3));
+    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, rgb(var(--gray-0)), rgb(var(--gray-1)));
-    border: 1px solid rgb(var(--gray-3));
+    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,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-50), var(--gray-100));
+    border-color: var(--gray-200);
     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-50), var(--gray-25));
 }
 
 [dark] .comment.isReceived .commentContent {
-    background: linear-gradient(to bottom, rgb(var(--gray-2)), rgb(var(--gray-1)));
+    background: linear-gradient(to bottom, var(--gray-100), var(--gray-50));
 }
 
 @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-200);
+        box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
         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-200);
+        box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
         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-300);
+        box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
+        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-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: rgb(var(--gray-1));
-    border-bottom: 1px solid rgb(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: rgb(var(--primary-7));
+        color: var(--primary-600);
     }
 }
 
@@ -75,7 +75,7 @@
     transition-property: background, border-radius, color, opacity;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
         color: var(--foreground-prominent);
     }
 
@@ -89,35 +89,24 @@
     }
 
     &.isSelected {
-        background: rgb(var(--primary-7));
-        color: rgb(var(--primary-1));
+        background: var(--primary-600);
+        color: var(--primary-50);
         font-weight: 700;
     }
 
     &.isRangeEntry {
-        background: rgb(var(--primary-3));
+        background: var(--primary-200);
         border-radius: 0;
-        color: rgb(var(--primary-11));
+        color: var(--primary-950);
     }
 
     &.isRangeEnd,
     &.isRangeStart {
-        background: rgb(var(--primary-7));
-        color: rgb(var(--primary-1));
+        background: var(--primary-600);
+        color: var(--primary-50);
         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-100);
         border-radius: 0;
         color: var(--foreground-prominent);
     }
 
     &.isSelectionEnd,
     &.isSelectionStart {
-        background: rgb(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: rgb(var(--gray-2));
+    background: var(--gray-100);
 }
 
 .separator {
-    background: rgb(var(--gray-2));
+    background: var(--gray-200);
 }
 
 .separatorHorizontal {

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

@@ -1,4 +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);
+
+    &: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-50);
+        --dz-stroke: var(--gray-200);
+    }
+}
+
+.dropZone {
+    position: relative;
     display: grid;
     align-items: center;
     gap: 15px 30px;
@@ -36,44 +58,25 @@
 }
 
 .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-600);
 }
 
 .isDraggingOver .dropZoneContent {
     &:has(.placeholder) {
-        --dz-fill: rgb(var(--primary-2));
+        --dz-fill: var(--primary-100);
     }
 
     .dropZoneBorder rect {
@@ -87,7 +90,7 @@
     inset: var(--dz-inset);
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-1) / .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: rgb(var(--gray-1));
+        background: var(--surface-hover);
     }
 
     :is(span) {
@@ -87,15 +87,15 @@
     flex-flow: column;
 
     .expandable + .expandable {
-        border-top: 1px solid rgb(var(--gray-2));
+        border-top: 1px solid var(--surface-stroke);
     }
 
     &:not(:first-child) {
-        border-top: 1px solid rgb(var(--gray-2));
+        border-top: 1px solid var(--surface-stroke);
     }
 
     &:not(:last-child) {
-        border-bottom: 1px solid rgb(var(--gray-2));
+        border-bottom: 1px solid var(--surface-stroke);
     }
 }