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

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

@@ -1,14 +1,19 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .calendar {
     composes: basePaneStructure from './base/Pane.module.scss';
 
     display: flex;
     flex-flow: column;
+    flex-grow: 1;
     box-shadow: var(--shadow-sm);
     contain: paint;
 }
 
+.calendarItemRegistry {
+    display: none;
+}
+
 .calendarActions {
     align-items: center;
 }
@@ -33,7 +38,7 @@
     text-transform: capitalize;
 
     @include mixin.hover {
-        color: rgb(var(--primary-7));
+        color: var(--primary-600);
     }
 }
 
@@ -50,18 +55,56 @@
     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;
+    }
+}
+
+/* region Month view */
+
 .calendarCells {
     display: grid;
     flex-grow: 1;
     gap: 1px;
-    grid-template-columns: repeat(7, 1fr);
-    grid-template-rows: min-content repeat(6, auto);
-    background: rgb(var(--gray-2));
+    grid-template-columns: repeat(7, minmax(180px, 1fr));
+    grid-auto-rows: auto;
+    overflow-x: auto;
+    background: var(--gray-100);
 }
 
 .calendarCell {
-    padding: 12px 21px;
-    background: rgb(var(--gray-0));
+    padding: 9px;
+    background: var(--gray-25);
 }
 
 .calendarDay {
@@ -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,253 @@
             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;
+/* endregion */
+
+/* region Time-grid view */
+
+.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;
+}
 
-    &.isSingle {
-        border-radius: calc(var(--radius) / 2);
+.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;
+
+    &.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;
+}
+
+.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;
+}
 
-    &.isStart {
-        margin-right: -21px;
-        border-top-left-radius: calc(var(--radius) / 2);
-        border-bottom-left-radius: calc(var(--radius) / 2);
+.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;
+}
+
+/* endregion */

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .chip {
     display: flex;
@@ -7,11 +7,11 @@
     align-items: center;
     flex-grow: 0;
     gap: 9px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-3));
-    border-radius: 99px;
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    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,22 +19,18 @@
 
         @include mixin.focus-ring(2px);
 
-        @media (hover: hover) {
-            &:hover {
-                background: rgb(var(--gray-2));
-            }
+        @include mixin.hover {
+            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));
-            }
+        @include mixin.hover {
+            background: var(--primary-100);
         }
     }
 
@@ -44,15 +40,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

@@ -1,10 +1,10 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .colorPicker {
     --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
 
     display: flex;
-    padding: 21px;
+    padding: 18px;
     flex-flow: column;
     gap: 15px;
 }
@@ -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 {