@flux-ui/components 3.0.0-next.9 → 3.1.0

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

@@ -0,0 +1,86 @@
+@use '~flux/components/css/mixin';
+
+.breadcrumb {
+    display: block;
+    max-width: 100%;
+}
+
+.breadcrumbList {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    gap: 3px;
+    list-style: none;
+
+    .breadcrumbItem {
+        margin: 0;
+    }
+}
+
+.breadcrumbItem {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: 3px;
+
+    &:last-child .breadcrumbSeparator {
+        display: none;
+    }
+}
+
+.breadcrumbLink {
+    display: inline-flex;
+    height: 30px;
+    max-width: 100%;
+    padding: 0 9px;
+    align-items: center;
+    gap: 9px;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius);
+    color: var(--foreground-secondary);
+    font-size: 14px;
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: var(--transition-default);
+    transition-property: background, color, mixin.focus-ring-transition-properties();
+
+    @include mixin.focus-ring(2px, true);
+
+    &:not(.isCurrent) {
+        @include mixin.hover {
+            background: var(--surface-hover);
+            color: var(--foreground);
+        }
+    }
+
+    &.isCurrent {
+        color: var(--foreground-prominent);
+        font-weight: 600;
+        cursor: default;
+        pointer-events: none;
+    }
+}
+
+.breadcrumbIcon {
+    margin-top: -1px;
+    margin-bottom: -1px;
+    flex-shrink: 0;
+}
+
+.breadcrumbLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.breadcrumbSeparator {
+    flex-shrink: 0;
+    color: var(--foreground-secondary);
+    opacity: .5;
+    pointer-events: none;
+}

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

@@ -1,32 +1,30 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .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));
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--primary-800));
 
     .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,25 +34,21 @@
 .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));
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--surface-active));
 }
 
 .secondaryButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: var(--foreground-prominent);
+    color: var(--foreground);
 }
 
 .secondaryButtonLabel {
@@ -64,56 +58,84 @@
 .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));
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--surface-active));
 
     .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));
-    }
+    @include mixin.button-active(var(--surface-active));
 }
 
-.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 +146,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 +154,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 +165,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

@@ -1,12 +1,19 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .calendar {
-    composes: basePaneStructure from './base/Pane.module.scss';
+    flex-grow: 1;
+}
+
+.calendarView {
+    contain: paint;
 
     display: flex;
     flex-flow: column;
-    box-shadow: var(--shadow-sm);
-    contain: paint;
+    flex-grow: 1;
+}
+
+.calendarItemRegistry {
+    display: none;
 }
 
 .calendarActions {
@@ -33,7 +40,7 @@
     text-transform: capitalize;
 
     @include mixin.hover {
-        color: rgb(var(--primary-7));
+        color: var(--primary-600);
     }
 }
 
@@ -50,18 +57,54 @@
     color: var(--foreground);
 }
 
+.calendarRangeLabel {
+    composes: calendarCurrentValue;
+
+    color: var(--foreground-prominent);
+    font-weight: 700;
+}
+
+.calendarItem {
+    display: block;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    cursor: default;
+    text-align: left;
+
+    @include mixin.focus-ring;
+
+    &.isClickable {
+        cursor: pointer;
+    }
+
+    &.isDraggable {
+        cursor: grab;
+
+        &:active {
+            cursor: grabbing;
+        }
+    }
+
+    &.isGrabbed {
+        outline: 2px solid var(--primary-500);
+        outline-offset: 2px;
+    }
+}
+
 .calendarCells {
     display: grid;
     flex-grow: 1;
     gap: 1px;
-    grid-template-columns: repeat(7, 1fr);
+    grid-template-columns: repeat(7, minmax(180px, 1fr));
     grid-template-rows: min-content repeat(6, auto);
-    background: rgb(var(--gray-2));
+    background: var(--gray-100);
+    overflow-x: auto;
 }
 
 .calendarCell {
-    padding: 12px 21px;
-    background: rgb(var(--gray-0));
+    padding: 9px;
+    background: var(--gray-25);
 }
 
 .calendarDay {
@@ -70,9 +113,9 @@
     padding-left: 0;
     padding-right: 0;
     color: var(--foreground-secondary);
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 1em;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 30px;
     text-align: center;
     text-transform: capitalize;
 }
@@ -81,13 +124,17 @@
     composes: calendarCell;
 
     position: relative;
-    min-height: 105px;
-    padding-bottom: 39px;
+    min-height: 90px;
+    padding-top: 33px;
+    outline: 2px dashed transparent;
+    outline-offset: -2px;
+    transition: 210ms var(--swift-out);
+    transition-property: background, outline-color, z-index;
+    z-index: 0;
 
     &.isDisabled {
-        background: rgb(var(--gray-1));
+        background: var(--gray-50);
         color: var(--foreground-secondary);
-        pointer-events: none;
 
         .calendarEntryDate {
             opacity: .25;
@@ -98,70 +145,247 @@
             pointer-events: none;
         }
     }
+
+    &.isFocused,
+    &.isDropTarget {
+        z-index: 1;
+    }
+
+    &.isFocused {
+        box-shadow: inset 0 0 0 2px var(--primary-200);
+    }
+
+    &.isDropTarget {
+        background: var(--primary-50);
+        outline-color: var(--primary-600);
+    }
+
+    &.isToday .calendarEntryDate {
+        color: var(--primary-600);
+    }
 }
 
 .calendarEntryDate {
     position: absolute;
-    right: 21px;
-    bottom: 15px;
+    top: 12px;
+    left: 12px;
     color: var(--foreground);
-    font-size: 15px;
+    font-size: 12px;
     font-weight: 700;
     line-height: 1em;
 }
 
 .calendarEvents {
     display: grid;
-    grid-auto-rows: 1fr;
+    grid-auto-rows: auto;
     gap: 3px;
 }
 
-.calendarEvent {
-    margin-left: -9px;
-    margin-right: -9px;
-    padding: 6px 9px;
-    background: rgb(var(--primary-2));
-    border: 0;
-    color: rgb(var(--primary-9));
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 1.3em;
-    text-align: left;
+.timeGrid {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    overflow: hidden;
+    background: var(--gray-25);
+}
 
-    /** note: This works in all browsers. */
-    display: -webkit-box;
+.timeGridInner {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
     overflow: hidden;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+}
+
+.timeGridHeader {
+    display: grid;
+    grid-template-columns: 64px 1fr;
+    background: var(--gray-25);
+    border-bottom: 1px solid var(--gray-100);
+}
+
+.timeGridHeaderGutter {
+    background: var(--gray-25);
+}
+
+.timeGridHeaderDays {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 1px;
+    background: var(--gray-100);
+}
+
+.timeGridHeaderDay {
+    padding: 9px 12px;
+    background: var(--gray-25);
+    color: var(--foreground-secondary);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1em;
+    text-align: center;
+    text-transform: capitalize;
 
-    &.isSingle {
-        border-radius: calc(var(--radius) / 2);
+    &.isToday {
+        color: var(--primary-600);
     }
+}
 
-    &.isMiddle {
-        margin-left: -22px;
-        margin-right: -22px;
+.timeGridAllDay {
+    display: grid;
+    grid-template-columns: 64px 1fr;
+    background: var(--gray-25);
+    border-bottom: 1px solid var(--gray-100);
+}
+
+.timeGridAllDayLabel {
+    align-self: stretch;
+    padding: 6px 9px;
+    color: var(--foreground-secondary);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1em;
+    text-align: right;
+}
+
+.timeGridAllDayDays {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 1px;
+    min-height: 36px;
+    background: var(--gray-100);
+}
+
+.timeGridAllDayCell {
+    display: flex;
+    flex-flow: column;
+    gap: 3px;
+    padding: 6px;
+    background: var(--gray-25);
+
+    &.isDropTarget {
+        box-shadow: inset 0 0 0 2px var(--primary-300);
     }
+}
+
+.timeGridBody {
+    display: grid;
+    grid-template-columns: 64px 1fr;
+    flex-grow: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+}
 
-    &.isStart {
-        margin-right: -21px;
-        border-top-left-radius: calc(var(--radius) / 2);
-        border-bottom-left-radius: calc(var(--radius) / 2);
+.timeGridHours {
+    display: flex;
+    flex-flow: column;
+    background: var(--gray-25);
+}
+
+.timeGridHourLabel {
+    position: relative;
+    box-sizing: border-box;
+    padding-right: 9px;
+    color: var(--foreground-secondary);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1em;
+    text-align: right;
+}
+
+.timeGridHourLabelText {
+    position: absolute;
+    top: 0;
+    right: 9px;
+    transform: translateY(-50%);
+    background: var(--gray-25);
+    padding: 0 2px;
+}
+
+.timeGridDays {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 1px;
+    background: var(--gray-100);
+}
+
+.timeGridDay {
+    position: relative;
+    background: var(--gray-25);
+    background-image: repeating-linear-gradient(
+        to bottom,
+        transparent,
+        transparent calc(var(--hour-height, 48px) - 1px),
+        var(--gray-100) calc(var(--hour-height, 48px) - 1px),
+        var(--gray-100) var(--hour-height, 48px)
+    );
+
+    &.isDropTarget {
+        box-shadow: inset 0 0 0 2px var(--primary-300);
     }
+}
+
+.timeGridDayItem {
+    position: absolute;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: 2px;
 
-    &.isEnd {
-        margin-left: -21px;
-        border-top-right-radius: calc(var(--radius) / 2);
-        border-bottom-right-radius: calc(var(--radius) / 2);
+    &.isClippedTop {
+        border-top: 2px dashed var(--warning-300);
     }
 
-    &:not(.isSingle):not(.isStart) {
-        span {
-            opacity: 0;
-        }
+    &.isClippedBottom {
+        border-bottom: 2px dashed var(--warning-300);
+    }
+
+    &.isResizing {
+        opacity: .8;
+    }
+}
+
+.timeGridDayItemBody {
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    > button {
+        display: block;
+        width: 100%;
+        height: 100%;
     }
+}
+
+.timeGridDayItemHandle {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 6px;
+    cursor: ns-resize;
+    z-index: 2;
+    background: transparent;
 
     @include mixin.hover {
-        background: rgb(var(--primary-3));
+        background: var(--primary-300);
+    }
+
+    &.isTop {
+        top: 0;
+    }
+
+    &.isBottom {
+        bottom: 0;
     }
 }
+
+.timeGridDropIndicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--primary-500);
+    z-index: 5;
+    pointer-events: none;
+}