@flux-ui/components 3.0.0-next.6 → 3.0.0-next.61

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

@@ -0,0 +1,332 @@
+@use "~flux/components/css/mixin";
+
+.commandPaletteBackdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--overlay);
+    backdrop-filter: blur(3px) saturate(180%);
+    animation: commandPaletteBackdropIn 300ms var(--swift-out) both;
+    z-index: 99000;
+
+    &.isClosing {
+        animation: commandPaletteBackdropOut 210ms var(--swift-out) both;
+    }
+}
+
+.commandPaletteDialog {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    padding-top: clamp(60px, 15vh, 160px);
+    align-items: flex-start;
+    justify-content: center;
+    animation: commandPaletteIn 300ms var(--swift-out) both;
+    z-index: 99001;
+
+    &.isClosing {
+        animation: commandPaletteOut 210ms var(--swift-out) both;
+        pointer-events: none;
+    }
+}
+
+.commandPalette {
+    display: flex;
+    overflow: hidden;
+    width: min(600px, calc(100dvw - 48px));
+    max-height: min(480px, calc(100dvh - 120px - clamp(60px, 15vh, 160px)));
+    flex-flow: column nowrap;
+    background: var(--surface);
+    background-clip: padding-box;
+    border: 1px solid var(--surface-stroke-out);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+    transition: height 120ms var(--deceleration-curve);
+}
+
+.commandPaletteSearch {
+    display: flex;
+    height: 54px;
+    padding: 0 18px;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 12px;
+    border-bottom: 1px solid var(--gray-100);
+}
+
+.commandPaletteSearchIcon {
+    flex-shrink: 0;
+    color: var(--foreground-secondary);
+    font-size: 16px;
+}
+
+.commandPaletteSearchInput {
+    height: 100%;
+    flex-grow: 1;
+    background: transparent;
+    border: 0;
+    color: var(--foreground);
+    font: inherit;
+    font-size: 16px;
+    outline: 0;
+
+    &::placeholder {
+        color: var(--foreground-secondary);
+    }
+}
+
+.commandPaletteBreadcrumb {
+    padding: 0;
+    flex-shrink: 0;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    color: var(--foreground-secondary);
+    font: inherit;
+    font-size: 15px;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: color 150ms;
+
+    @include mixin.hover {
+        color: var(--foreground);
+    }
+}
+
+.commandPaletteBreadcrumbSeparator {
+    flex-shrink: 0;
+    opacity: .5;
+    color: var(--foreground-secondary);
+    font-size: 14px;
+}
+
+
+.commandPaletteTabs {
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: none;
+    padding: 6px 15px;
+    flex-shrink: 0;
+    gap: 3px;
+    border-bottom: 1px solid var(--gray-100);
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.commandPaletteTab {
+    display: flex;
+    height: 30px;
+    padding: 0 10px;
+    align-items: center;
+    gap: 6px;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-half);
+    cursor: pointer;
+    color: var(--foreground-secondary);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: background 150ms, color 150ms;
+
+    @include mixin.hover {
+        background: var(--gray-100);
+        color: var(--foreground);
+    }
+}
+
+.commandPaletteTabActive {
+    composes: commandPaletteTab;
+
+    background: var(--primary-100);
+    color: var(--primary-700);
+
+    @include mixin.hover {
+        background: var(--primary-100);
+        color: var(--primary-700);
+    }
+}
+
+.commandPaletteTabIcon {
+    font-size: 13px;
+}
+
+.commandPaletteResults {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: 42px 6px;
+    scrollbar-width: thin;
+    padding: 6px;
+    flex-grow: 1;
+}
+
+.commandPaletteLoading {
+    display: flex;
+    padding: 24px;
+    align-items: center;
+    justify-content: center;
+}
+
+.commandPaletteEmpty {
+    display: flex;
+    padding: 24px;
+    align-items: center;
+    justify-content: center;
+    color: var(--foreground-secondary);
+    font-size: 14px;
+}
+
+.commandPaletteGroup {
+    display: flex;
+    padding: 9px 10px 3px;
+    align-items: center;
+    gap: 6px;
+    color: var(--foreground-secondary);
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    pointer-events: none;
+}
+
+.commandPaletteGroupIcon {
+    font-size: 12px;
+}
+
+.commandPaletteItem {
+    display: flex;
+    width: 100%;
+    padding: 8px 10px;
+    align-items: center;
+    gap: 10px;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-half);
+    cursor: pointer;
+    color: var(--foreground);
+    font: inherit;
+    font-size: 14px;
+    text-align: left;
+    transition: background 100ms;
+
+    @include mixin.hover {
+        background: var(--gray-100);
+    }
+
+    &:active {
+        background: var(--gray-200);
+    }
+}
+
+.commandPaletteItemHighlighted {
+    composes: commandPaletteItem;
+
+    background: var(--gray-100);
+
+    @include mixin.hover {
+        background: var(--gray-100);
+    }
+}
+
+.commandPaletteItemIcon {
+    display: flex;
+    width: 30px;
+    height: 30px;
+    align-items: center;
+    align-self: flex-start;
+    flex-shrink: 0;
+    justify-content: center;
+    background: var(--gray-100);
+    border-radius: var(--radius-half);
+    color: var(--foreground);
+    transition: background 100ms, color 100ms;
+
+    :local(.icon) {
+        font-size: 16px;
+    }
+}
+
+.commandPaletteItemHighlighted .commandPaletteItemIcon {
+    background: var(--gray-200);
+}
+
+.commandPaletteItemContent {
+    overflow: hidden;
+    flex-grow: 1;
+}
+
+.commandPaletteItemLabel {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.commandPaletteItemSubLabel {
+    overflow: hidden;
+    margin-top: 1px;
+    color: var(--foreground-secondary);
+    font-size: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    transition: color 100ms;
+}
+
+.commandPaletteItemHighlighted .commandPaletteItemSubLabel {
+    color: var(--primary-500);
+}
+
+
+.commandPaletteItemSubActionIndicator {
+    flex-shrink: 0;
+    color: var(--foreground-secondary);
+    font-size: 12px;
+    transition: color 100ms;
+}
+
+.commandPaletteItemHighlighted .commandPaletteItemSubActionIndicator {
+    color: var(--primary-500);
+}
+
+@keyframes commandPaletteIn {
+    from {
+        opacity: 0;
+        scale: 1.05;
+    }
+
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes commandPaletteOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes commandPaletteBackdropIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes commandPaletteBackdropOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .datePicker {
     display: flex;
@@ -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);
     }
 }
 
@@ -71,11 +71,11 @@
     cursor: pointer;
     font-size: 14px;
     outline: 0;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .expandable {
     display: flex;
@@ -11,9 +11,9 @@
 
 .expandableHeader {
     display: flex;
-    height: 60px;
-    padding-left: 21px;
-    padding-right: 21px;
+    height: 54px;
+    padding-left: 18px;
+    padding-right: 18px;
     align-items: center;
     gap: 12px;
     background: unset;
@@ -21,14 +21,14 @@
     color: var(--foreground-prominent);
     cursor: pointer;
     text-align: left;
-    transition: background 180ms var(--swift-out);
+    transition: background var(--transition-default);
     transition-property: background, mixin.focus-ring-transition-properties();
     z-index: 1;
 
     @include mixin.focus-ring();
 
     @include mixin.hover {
-        background: rgb(var(--gray-1));
+        background: var(--surface-hover);
     }
 
     :is(span) {
@@ -66,7 +66,7 @@
 }
 
 .expandableContent {
-    padding: 0 21px 21px;
+    padding: 0 18px 18px;
 }
 
 .basePane > .expandable {
@@ -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);
     }
 }
 

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

@@ -12,7 +12,8 @@
     inset: 0;
     transition: 660ms var(--deceleration-curve);
 
-    &.isCurrent {}
+    &.isCurrent {
+    }
 
     &:not(.isCurrent) {
         opacity: 0;