@flux-ui/components 3.0.0-next.34 → 3.0.0-next.38

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

@@ -12,7 +12,7 @@
     gap: 6px;
     background: var(--surface);
     border: 1px solid var(--surface-stroke);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground-prominent);
     font-size: 13px;
     font-weight: 500;
@@ -22,7 +22,7 @@
         color: var(--foreground-prominent);
         cursor: pointer;
         text-decoration: none;
-        transition: background 180ms var(--swift-out);
+        transition: background var(--transition-default);
 
         @include mixin.hover {
             background: var(--gray-50);
@@ -45,7 +45,7 @@
     justify-content: center;
     background: unset;
     border: 0;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground-secondary);
     cursor: pointer;
 
@@ -69,7 +69,7 @@
     height: 9px;
     width: 9px;
     background: var(--color);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
 }
 
 .badgeIcon {
@@ -142,6 +142,13 @@
     font-weight: 400;
 }
 
+.tagKeyboardShortcut {
+    composes: tag;
+
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
 .tagClose {
     composes: badgeClose;
 

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

@@ -13,10 +13,7 @@
         border-color: var(--primary-800);
     }
 
-    &:active {
-        background: var(--primary-800);
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--primary-800));
 
     .spinner {
         --track: var(--primary-700);
@@ -45,10 +42,7 @@
         background: var(--surface-hover);
     }
 
-    &:active {
-        background: var(--surface-active);
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--surface-active));
 }
 
 .secondaryButtonIcon {
@@ -72,10 +66,7 @@
         background: var(--surface-hover);
     }
 
-    &:active {
-        background: var(--surface-active);
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--surface-active));
 
     .spinner {
         --value: var(--danger-600);
@@ -112,10 +103,7 @@
         background: var(--surface-hover);
     }
 
-    &:active {
-        background: var(--surface-active);
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--surface-active));
 }
 
 .primaryLinkButton {

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

@@ -60,7 +60,7 @@
 }
 
 .calendarCell {
-    padding: 12px 21px;
+    padding: 12px 18px;
     background: var(--gray-25);
 }
 
@@ -102,7 +102,7 @@
 
 .calendarEntryDate {
     position: absolute;
-    right: 21px;
+    right: 18px;
     bottom: 15px;
     color: var(--foreground);
     font-size: 15px;
@@ -144,13 +144,13 @@
     }
 
     &.isStart {
-        margin-right: -21px;
+        margin-right: -18px;
         border-top-left-radius: var(--radius-half);
         border-bottom-left-radius: var(--radius-half);
     }
 
     &.isEnd {
-        margin-left: -21px;
+        margin-left: -18px;
         border-top-right-radius: var(--radius-half);
         border-bottom-right-radius: var(--radius-half);
     }

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

@@ -9,9 +9,9 @@
     gap: 9px;
     background: var(--gray-50);
     border: 1px solid var(--gray-200);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground);
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, border, color, mixin.focus-ring-transition-properties();
 
     &.isSelectable {
@@ -19,10 +19,8 @@
 
         @include mixin.focus-ring(2px);
 
-        @media (hover: hover) {
-            &:hover {
-                background: var(--gray-100);
-            }
+        @include mixin.hover {
+            background: var(--gray-100);
         }
     }
 
@@ -31,10 +29,8 @@
         border-color: var(--primary-200);
         color: var(--primary-600);
 
-        @media (hover: hover) {
-            &:hover {
-                background: var(--primary-100);
-            }
+        @include mixin.hover {
+            background: var(--primary-100);
         }
     }
 

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

@@ -4,7 +4,7 @@
     --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
 
     display: flex;
-    padding: 21px;
+    padding: 18px;
     flex-flow: column;
     gap: 15px;
 }

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

@@ -0,0 +1,332 @@
+@use "$flux/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/DatePicker.module.scss

@@ -71,7 +71,7 @@
     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 {

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

@@ -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,7 +21,7 @@
     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;
 
@@ -66,7 +66,7 @@
 }
 
 .expandableContent {
-    padding: 0 21px 21px;
+    padding: 0 18px 18px;
 }
 
 .basePane > .expandable {

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

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

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

@@ -6,7 +6,7 @@
     top: var(--pane-y);
     left: var(--pane-x);
     margin: 0;
-    padding: 24px;
+    padding: 30px;
     background: unset;
     border: 0;
     font-size: 1rem;

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

@@ -18,7 +18,7 @@
     width: 42px;
     background: rgb(0 0 0 / .1);
     border: 4px solid white;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     box-shadow: var(--shadow-md);
     cursor: move;
     transform: translate3d(-50%, -50%, 0);