@lucca-front/scss 19.0.0 → 19.1.0

package/src/components/calendar/component.scss

@@ -7,6 +7,50 @@
 	width: var(--components-calendarWidth);
 
 	@at-root ($atRoot) {
+		.calendarShortcutsOptionnal {
+			display: flex;
+		}
+
+		.calendarShortcuts {
+			@include reset.list;
+
+			width: 13.5rem;
+			border-right: 1px solid var(--palettes-neutral-100);
+			padding: var(--pr-t-spacings-50);
+			overflow: auto;
+			position: relative;
+			z-index: 1;
+			border-radius: var(--commons-borderRadius-M) 0 0 var(--commons-borderRadius-M);
+
+			&:focus-visible {
+				@include a11y.focusVisible;
+			}
+
+			&.mod-day {
+				max-height: 19.25rem;
+
+				&:has(+ .calendarWrapper .calendar-todayLink) {
+					max-height: 21.75rem;
+				}
+			}
+
+			&.mod-month,
+			&.mod-year {
+				max-height: 18rem;
+			}
+		}
+
+		.calendarShortcutsButton-item-button.button {
+			@include button.block;
+			@include button.text;
+			@include button.S;
+
+			justify-content: flex-start;
+			font-weight: 400;
+			white-space: wrap;
+			text-align: left;
+		}
+
 		.calendar-table {
 			border-spacing: var(--components-calendarBorderSpacing);
 			border: var(--pr-t-spacings-150) solid transparent;
@@ -21,9 +65,16 @@
 		}
 
 		.calendarWrapper {
-			width: calc(var(--components-calendarWrapperWidth) * var(--components-calendarWrapperVisible));
 			background-color: var(--components-calendarWrapperBackground);
 			position: relative;
+
+			&:has(.calendar-table-body-row-cell-action:focus-visible) {
+				&:has(.calendar-table-body-row-cell-action:hover) {
+					.calendar-table-body-row-cell-action:hover:not(:focus-visible) {
+						outline: none;
+					}
+				}
+			}
 		}
 
 		.calendarWrapper-content {
@@ -33,11 +84,9 @@
 			scroll-snap-type: x mandatory;
 			-ms-overflow-style: none;
 			scrollbar-width: none;
-
 			&::-webkit-scrollbar {
 				display: none;
 			}
-
 			&:focus-visible {
 				@include a11y.focusVisible;
 			}
@@ -45,21 +94,12 @@
 
 		.calendarWrapper-navigation {
 			position: absolute;
-			top: var(--pr-t-spacings-150);
+			top: 0;
 			background-color: var(--components-calendarWrapper-navigationBackground);
-			border-width: 0 var(--pr-t-spacings-150);
+			border-width: var(--pr-t-spacings-150);
 			border-style: solid;
-			border-color: transparent var(--components-calendarWrapper-navigationBackground);
-
-			&.mod-prev {
-				left: var(--pr-t-spacings-25);
-				border-right: 0;
-			}
-
-			&.mod-next {
-				right: var(--pr-t-spacings-25);
-				border-left: 0;
-			}
+			border-color: var(--components-calendarWrapper-navigationBackground);
+			border-radius: var(--commons-borderRadius-L);
 		}
 
 		.calendarWrapper-navigation-button {

package/src/components/calendar/index.scss

@@ -1,4 +1,5 @@
 @use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
 
 .calendarWrapper {
 	@include wrapperVars;
@@ -20,29 +21,14 @@
 	&:has(.calendar-table-body-row-cell:nth-child(3):last-child) {
 		@include third;
 	}
+}
 
-	// if we have a selection start
-	&:has(.calendar-table-body-row-cell.is-start) {
-		// but no selection end
-		&:not(:has(.calendar-table-body-row-cell.is-end)) {
-			// and either focus-visible
-			&:has(.calendar-table-body-row-cell-action:focus-visible) {
-				// we call the selection in progress mixin
-				@include selectionInProgress($event: ':focus-within');
-			}
-
-			// or hovering (without focus-visible)
-			&:not(:has(.calendar-table-body-row-cell:focus-within)) {
-				&:has(.calendar-table-body-row-cell:hover) {
-					// we call the selection in progress mixin
-					@include selectionInProgress($event: ':hover');
-				}
-			}
-		}
+.calendarShortcuts {
+	@include media.max('S') {
+		display: none;
 	}
 }
 
-.calendar-table-body-row-cell,
 .calendar-table-body-row-cell {
 	&.is-daysOff {
 		@include daysOff;
@@ -56,10 +42,14 @@
 		@include current;
 	}
 
-	&.is-selected {
-		@include selected;
+	&.is-selected,
+	&.is-selectionInProgress {
+		&:not(.is-overflow) {
+			@include selected;
+		}
 	}
 
+	&.is-singleDayInProgress,
 	&.is-start {
 		@include start;
 	}
@@ -67,4 +57,20 @@
 	&.is-end {
 		@include end;
 	}
+
+	&.is-startInProgress {
+		&:not(.is-endInProgress) {
+			@include startInProgress;
+		}
+
+		&.is-endInProgress {
+			@include startEndInProgress;
+		}
+	}
+
+	&.is-endInProgress {
+		&:not(.is-startInProgress) {
+			@include endInProgress;
+		}
+	}
 }

package/src/components/calendar/states.scss

@@ -1,6 +1,6 @@
 @mixin daysOff {
 	.calendar-table-body-row-cell-action {
-		&:not(:disabled, [aria-disabled=true]) {
+		&:not(:disabled, [aria-disabled='true']) {
 			&:active {
 				--components-calendar-table-body-row-cell-action-stripesColor: var(--palettes-product-900);
 			}
@@ -31,6 +31,18 @@
 	}
 }
 
+@mixin unselected {
+	&::before {
+		--components-calendar-table-body-row-cellSelectedBeforeContent: none;
+	}
+
+	&.is-daysOff {
+		.calendar-table-body-row-cell-action {
+			--components-calendar-table-body-row-cell-action-stripesColor: var(--palettes-neutral-200);
+		}
+	}
+}
+
 @mixin extremity {
 	.calendar-table-body-row-cell-action {
 		--components-calendar-table-body-row-cell-actionColor: var(--palettes-0, var(--palettes-product-0));
@@ -54,7 +66,6 @@
 
 	&.is-selected {
 		.calendar-table-body-row-cell-action {
-			// outline: 2px solid red;
 			--components-calendar-table-body-row-cell-actionColor: var(--palettes-0, var(--palettes-product-0));
 		}
 	}
@@ -84,141 +95,73 @@
 	}
 }
 
-@mixin overflow {
-	.calendar-table-body-row-cell-action,
-	.calendar-table-body-row-cell-action {
-		--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-600);
+@mixin startInProgress {
+	&:not(:hover) {
+		@include extremity;
 	}
-}
 
-@mixin selectionInProgressBeforeWeek($parent, $child, $start, $action, $event) {
-	#{$child + $event} {
-		&:has(#{$action}) {
-			@include selected;
+	--components-calendar-table-body-row-cell-action-stripesColor: var(--palettes-200, var(--palettes-product-200));
 
-			--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: var(--commons-borderRadius-L) 0 0 var(--commons-borderRadius-L);
+	&:has(:focus-visible) {
+		&.is-daysOff {
+			.calendar-table-body-row-cell-action {
+				--components-calendar-table-body-row-cell-action-stripesColor: var(--palettes-200, var(--palettes-product-200));
+			}
 		}
-	}
 
-	#{$child + $event} ~ #{$child} {
-		&:has(#{$action}) {
-			@include selected;
+		.calendar-table-body-row-cell-action {
+			--components-calendar-table-body-row-cell-actionHighlight: transparent;
+			--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-700);
+			--components-calendar-table-body-row-cell-actionOutlineOffset: -1px !important;
 		}
 	}
 
-	~ #{$parent} {
-		&:not(#{$parent}:has(#{$start}) ~ #{$parent}) {
-			#{$child} {
-				&:not(#{$start} ~ #{$child}) {
-					&:has(#{$action}) {
-						@include selected;
-					}
-				}
-			}
-		}
-	}
-	~ #{$parent}:has(#{$start}) {
-		#{$start} {
-			&::before {
-				--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0 var(--commons-borderRadius-L) var(--commons-borderRadius-L) 0;
-			}
-		}
+	&::before {
+		right: 0;
+		--components-calendar-table-body-row-cellSelectedBeforeContent: '';
+		--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: var(--commons-borderRadius-L) 0 0 var(--commons-borderRadius-L);
 	}
 }
 
-@mixin selectionInProgressAfterWeek($parent, $child, $start, $action, $event) {
-	~ #{$parent} {
-		&:not(&#{$event} ~ #{$parent}) {
-			#{$child} {
-				&:not(#{$child + $event} ~ #{$child}) {
-					&:has(#{$action}) {
-						@include selected;
-
-						#{$event} {
-							--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0 var(--commons-borderRadius-L)
-								var(--commons-borderRadius-L) 0;
-						}
-					}
-				}
-			}
-		}
+@mixin endInProgress {
+	&:not(:hover) {
+		@include extremity;
 	}
 
-	#{$start} ~ #{$child} {
-		&:has(#{$action}) {
-			@include selected;
+	--components-calendar-table-body-row-cell-action-stripesColor: var(--palettes-200, var(--palettes-product-200));
 
-			#{$event} {
-				--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0 var(--commons-borderRadius-L) var(--commons-borderRadius-L) 0;
+	&:has(:focus-visible) {
+		&.is-daysOff {
+			.calendar-table-body-row-cell-action {
+				--components-calendar-table-body-row-cell-action-stripesColor: var(--palettes-200, var(--palettes-product-200));
 			}
 		}
-	}
-}
 
-@mixin selectionInProgressSameWeekBeforeDay($parent, $child, $start, $action, $event) {
-	#{$child + $event} ~ #{$child} {
-		&:not(#{$start} ~ #{$child}) {
-			@include selected;
+		.calendar-table-body-row-cell-action {
+			--components-calendar-table-body-row-cell-actionHighlight: transparent;
+			--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-700);
+			--components-calendar-table-body-row-cell-actionOutlineOffset: -1px !important;
 		}
 	}
 
-	#{$child + $event} {
-		@include selected;
-
-		--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: var(--commons-borderRadius-L) 0 0 var(--commons-borderRadius-L);
-	}
-
-	#{$start} {
-		&::before {
-			--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0 var(--commons-borderRadius-L) var(--commons-borderRadius-L) 0;
-		}
+	&::before {
+		left: 0;
+		--components-calendar-table-body-row-cellSelectedBeforeContent: '';
+		--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0 var(--commons-borderRadius-L) var(--commons-borderRadius-L) 0;
 	}
 }
 
-@mixin selectionInProgressSameWeekAfterDay($parent, $child, $start, $action, $event) {
-	#{$start} ~ #{$child} {
-		&:not(#{$child + $event} ~ #{$child}) {
-			&:has(#{$action}) {
-				@include selected;
+@mixin startEndInProgress {
+	@include extremity;
 
-				#{$event} {
-					--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0 var(--commons-borderRadius-L) var(--commons-borderRadius-L)
-						0;
-				}
-			}
-		}
+	&::before {
+		--components-calendar-table-body-row-cellSelectedBeforeContent: none;
 	}
 }
 
-@mixin selectionInProgress($event) {
-	$parent: '.calendar-table-body-row';
-	$child: '.calendar-table-body-row-cell';
-	$start: #{$child + '.is-start'};
-	$action: '.calendar-table-body-row-cell-action:not(:disabled, [aria-disabled=true])';
-
-	#{$parent} {
-		&:has(#{$start}) {
-			&:has(~ #{$parent} #{$child + $event}) {
-				@include selectionInProgressAfterWeek($parent, $child, $start, $action, $event);
-			}
-		}
-	}
-
-	#{$parent} {
-		&:has(#{$child + $event}) {
-			&:has(~ #{$parent} #{$start}) {
-				@include selectionInProgressBeforeWeek($parent, $child, $start, $action, $event);
-			}
-		}
-	}
-
-	#{$parent} {
-		&:has(#{$start} ~ #{$child + $event}) {
-			@include selectionInProgressSameWeekAfterDay($parent, $child, $start, $action, $event);
-		}
-
-		&:has(#{$child + $event} ~ #{$start}) {
-			@include selectionInProgressSameWeekBeforeDay($parent, $child, $start, $action, $event);
-		}
+@mixin overflow {
+	.calendar-table-body-row-cell-action,
+	.calendar-table-body-row-cell-action {
+		--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-600);
 	}
 }

package/src/components/calendar/vars.scss

@@ -1,6 +1,5 @@
 @mixin wrapperVars {
 	--components-calendarWrapperWidth: 17.25rem;
-	--components-calendarWrapperVisible: 1;
 	--components-calendarWrapperBackground: transparent;
 	--components-calendarWrapper-navigationBackground: var(--palettes-neutral-0);
 }

package/src/components/callout/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
@@ -45,6 +46,7 @@
 			padding: var(--pr-t-spacings-50) 0;
 
 			.button {
+				@include color.palette('neutral');
 				@include button.S;
 			}
 		}

package/src/components/calloutFeedbackList/component.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
-@use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/color';
+@use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	@include reset.list;
@@ -12,6 +13,7 @@
 	gap: var(--components-calloutFeedbackList-gap);
 
 	.button {
+		@include color.palette('neutral');
 		@include button.S;
 	}
 

package/src/components/card/mods.scss

@@ -38,11 +38,9 @@
 		box-shadow: var(--pr-t-elevation-shadow-overlay);
 	}
 
-	// Remove actionIcon reference when button & action icon will be merged as a single component
-	&:has(.card-action .actionIcon:focus-visible, .card-action .button:focus-visible) {
+	&:has(.card-action .button:focus-visible) {
 		@include a11y.focusVisible($offset: 3px);
 
-		.actionIcon,
 		.button {
 			outline: none;
 

package/src/components/dataTable/component.scss

@@ -0,0 +1,131 @@
+@use '@lucca-front/icons/src/commons/utils/icon';
+
+@use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@use '@lucca-front/scss/src/components/button/exports' as button;
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: table;
+	text-align: left;
+	width: calc(100% + 1px);
+	height: calc(100% + 1px);
+	border-spacing: 0;
+	margin-left: -1px;
+	margin-top: -1px;
+	table-layout: var(--components-dataTable-tableLayout);
+
+	@at-root ($atRoot) {
+		.dataTableWrapper {
+			border-radius: var(--commons-borderRadius-L);
+			border: 1px solid var(--commons-border-200);
+			overflow: var(--components-dataTable-overflow);
+			background-color: var(--components-dataTable-cell-background);
+
+			&:focus-visible {
+				@include a11y.focusVisible;
+			}
+		}
+
+		.dataTable-head-row-cell {
+			color: var(--palettes-neutral-700);
+			padding: var(--components-dataTable-cell-padding);
+			display: table-cell;
+			font-weight: 400;
+
+			.checkboxField {
+				margin-block-end: 0.125rem;
+			}
+		}
+
+		.dataTable-head {
+			display: table-header-group;
+			vertical-align: bottom;
+		}
+
+		.dataTable-body {
+			display: table-row-group;
+		}
+
+		.dataTable-foot {
+			display: table-footer-group;
+		}
+
+		.dataTable-head-row,
+		.dataTable-body-row,
+		.dataTable-foot-row {
+			display: var(--components-dataTable-row-display);
+		}
+
+		.dataTable-head-row-cell,
+		.dataTable-body-row-cell,
+		.dataTable-foot-row-cell {
+			display: table-cell;
+			box-shadow: var(--components-dataTable-cell-shadow);
+			background-color: var(--components-dataTable-cell-background);
+			text-align: var(--components-dataTable-cell-textAlign);
+
+			&:first-child {
+				width: var(--components-dataTable-cellFirst-width);
+			}
+		}
+
+		.dataTable-body-row-cell,
+		.dataTable-foot-row-cell {
+			padding: var(--components-dataTable-cell-padding);
+			padding-inline-start: var(--components-dataTable-cell-paddingInlineStart);
+			vertical-align: middle;
+		}
+
+		.dataTable-head-row {
+			&:first-child {
+				.dataTable-head-row-cell {
+					--components-dataTable-cell-shadow: none;
+				}
+			}
+		}
+
+		.dataTable-body-row-cell {
+			vertical-align: var(--components-dataTable-cell-verticalAlign);
+		}
+
+		.dataTable-foot-row-cell {
+			font-weight: 600;
+		}
+
+		.dataTable-body-row-cell-expand {
+			display: flex;
+			gap: var(--pr-t-spacings-100);
+			align-items: flex-start;
+		}
+
+		.dataTable-body-row-cell-expand-button.button {
+			vertical-align: top;
+
+			.lucca-icon {
+				transform: rotate(var(--components-dataTable-expand-rotation));
+				transition-property: transform;
+				transition-duration: var(--commons-animations-durations-fast);
+			}
+		}
+
+		.dataTable-body-row-cell-drag.button {
+			@include button.S;
+			@include button.onlyIcon;
+			@include button.text;
+
+			--components-button-padding: var(--pr-t-spacings-50);
+			--components-button-color: var(--palettes-neutral-700);
+
+			cursor: move;
+			vertical-align: top;
+		}
+	}
+
+	.statusBadge,
+	.tag,
+	.avatar {
+		display: flex;
+		width: fit-content;
+	}
+}

package/src/components/dataTable/index.scss

@@ -0,0 +1,85 @@
+@use 'exports' as *;
+
+.dataTableWrapper {
+	@include vars;
+}
+
+.dataTable {
+	@include component;
+
+	&.mod-cellBorder {
+		@include cellBorder;
+	}
+
+	&.mod-alignTop {
+		@include alignTop;
+	}
+
+	&.mod-layoutFixed {
+		@include layoutFixed;
+	}
+
+	&[class*='mod-layoutFixedAtMediaMin'] {
+		@include layoutFixedWithBreakpoint;
+	}
+
+	&[class*='mod-layoutFixed'] {
+		@include layoutFixedCells;
+	}
+}
+
+:is(.dataTable-head-row, .dataTable-body-row, .dataTable-foot-row) {
+	&.mod-group {
+		@include group;
+	}
+
+	&.mod-selectable {
+		@include selectable;
+	}
+
+	&.mod-draggable {
+		@include draggable;
+	}
+}
+
+:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
+	&.mod-actions {
+		@include actions;
+	}
+
+	&.mod-alignCenter {
+		@include alignCenter;
+	}
+
+	&.mod-alignRight {
+		@include alignRight;
+	}
+
+	&.mod-editable {
+		@include editable;
+	}
+
+	&.mod-tree {
+		@include tree;
+	}
+}
+
+.dataTable-body-row {
+	&.is-collapsed {
+		@include collapsed;
+	}
+
+	&:first-child {
+		&:has(.dataTable-body-row-cell-expand-button.button[aria-expanded='false']) {
+			~ .dataTable-body-row {
+				@include collapsed;
+			}
+		}
+	}
+}
+
+.dataTable-body-row-cell-expand-button {
+	&[aria-expanded='true'] {
+		@include expanded;
+	}
+}