@lucca-front/scss 20.3.3 → 21.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "20.3.3",
+  "version": "21.0.0-rc.1",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,6 +23,6 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "20.3.3"
+    "@lucca-front/icons": "21.0.0-rc.1"
   }
 }

package/src/commons/config.scss

@@ -604,11 +604,11 @@ $elevation: (
 
 // Tokens : Colors
 $colorInput: (
-	text: var(--palettes-neutral-800),
+	text: var(--pr-t-color-text),
 	text-placeholder: var(--palettes-neutral-400),
 	text-placeholder-critical: var(--palettes-critical-400),
-	text-suffix: var(--palettes-neutral-600),
-	text-disabled: var(--palettes-neutral-500),
+	text-suffix: var(--pr-t-color-text-subtle),
+	text-disabled: var(--palettes-neutral-700),
 	icon: var(--palettes-neutral-600),
 	icon-disabled: var(--palettes-neutral-500),
 	background: var(--palettes-neutral-0),

package/src/components/breadcrumbs/component.scss

@@ -31,7 +31,8 @@
 			}
 		}
 
-		.breadcrumbs-list-item-action {
+		// Second selector to get rid of breadcrumbs-list-item-action on angular component
+		.breadcrumbs-list-item-action, .breadcrumbs-list-item > a  {
 			color: var(--pr-t-color-text-subtle);
 			transition-duration: var(--commons-animations-durations-fast);
 			transition-property: color;

package/src/components/breadcrumbs/index.scss

@@ -14,7 +14,8 @@
 	}
 }
 
-.breadcrumbs-list-item-action {
+// Second selector to get rid of breadcrumbs-list-item-action on angular component
+.breadcrumbs-list-item-action, .breadcrumbs-list-item > a {
 	@layer mods {
 		// .active is deprecated
 		&.is-active,

package/src/components/breadcrumbs/mods.scss

@@ -10,7 +10,8 @@
 			}
 
 			&:first-child {
-				.breadcrumbs-list-item-action {
+				// Second selector to get rid of breadcrumbs-list-item-action on angular component
+				.breadcrumbs-list-item-action, .breadcrumbs-list-item > a {
 					&::before {
 						@include icon.generate('arrow_left');
 

package/src/components/calendar/component.scss

@@ -182,6 +182,8 @@
 		.calendar-table-head-row-cell,
 		.calendar-table-body-row-cell {
 			padding: var(--pr-t-spacings-25);
+			block-size: var(--pr-t-spacings-400);
+			box-sizing: content-box;
 		}
 
 		.calendar-table-head-row-cell {
@@ -216,20 +218,14 @@
 			color: var(--components-calendar-table-body-row-cell-actionColor);
 			background-color: var(--components-calendar-table-body-row-cell-actionHighlight);
 			display: var(--components-calendar-table-body-row-cell-actionDisplay);
-			block-size: var(--pr-t-spacings-400);
+			block-size: 100%;
 			text-transform: lowercase;
+			cursor: var(--components-calendar-table-body-row-cell-actionCursor);
+			text-decoration: var(--components-calendar-table-body-row-cell-actionTextDecoration);
 			box-shadow:
 				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight),
 				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight) inset;
 
-			&:disabled,
-			&[aria-disabled='true'] {
-				--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-500);
-
-				text-decoration: line-through;
-				cursor: default;
-			}
-
 			&:not(:disabled, [aria-disabled='true']) {
 				&:hover {
 					@include a11y.focusVisible;

package/src/components/calendar/index.scss

@@ -84,5 +84,13 @@
 				@include endInProgress;
 			}
 		}
+
+		.calendar-table-body-row-cell-action {
+			&:disabled,
+			&[aria-disabled='true'] {
+				@include disabled;
+			}
+		}
 	}
 }
+

package/src/components/calendar/states.scss

@@ -168,3 +168,9 @@
 		--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-600);
 	}
 }
+
+@mixin disabled {
+	--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-500);
+	--components-calendar-table-body-row-cell-actionTextDecoration: line-through;
+	--components-calendar-table-body-row-cell-actionCursor: default;
+}

package/src/components/calendar/vars.scss

@@ -11,6 +11,8 @@
 	--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-700);
 	--components-calendar-table-body-row-cell-actionOutlineWidth: 2px;
 	--components-calendar-table-body-row-cell-actionOutlineOffset: -1px;
+	--components-calendar-table-body-row-cell-actionCursor: pointer;
+	--components-calendar-table-body-row-cell-actionTextDecoration: none;
 	--components-calendar-table-body-row-cellSelectedBeforeContent: none;
 	--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0;
 	--components-calendar-table-body-row-cell-actionDisplay: block;

package/src/components/callout/component.scss

@@ -48,7 +48,6 @@
 
 		}
 
-
 		.callout-content-description-actions {
 			display: flex;
 			gap: var(--pr-t-spacings-75);

package/src/components/calloutPopover/component.scss

@@ -22,6 +22,12 @@
 	}
 
 	@at-root ($atRoot) {
+		.calloutPopover-content {
+			&:empty {
+				display: none;
+			}
+		}
+
 		.calloutPopover-icon {
 			color: var(--palettes-700, var(--palettes-neutral-700));
 		}
@@ -29,33 +35,30 @@
 		.calloutPopover-overlay {
 			inline-size: var(--components-calloutPopover-width);
 			max-inline-size: 100vw;
-		}
-
-		.calloutPopover-overlay-head {
 			display: flex;
 			gap: var(--pr-t-spacings-100);
 		}
 
 		.calloutPopover-overlay-head-title {
+			display: block;
 			font: var(--pr-t-font-body-M);
 			font-weight: var(--pr-t-font-fontWeight-semibold);
-			margin: 0;
 			padding: 0;
+			margin: 0;
+			padding-block-end: var(--pr-t-spacings-100);
+			margin-block-end: var(--pr-t-spacings-100);
+			border-block-end: var(--commons-divider-width) solid var(--palettes-neutral-200);
 		}
 
-		.calloutPopover-overlay-head-icon {
+		.calloutPopover-overlay-icon {
 			@include icon.M;
 
 			color: var(--palettes-700, var(--palettes-neutral-700));
+
 		}
 
 		.calloutPopover-overlay-content {
-			margin-block-start: var(--pr-t-spacings-100);
-			margin-inline-end: var(--pr-t-spacings-150);
 			margin-block-end: var(--pr-t-spacings-100);
-			margin-inline-start: var(--components-calloutPopover-content-margin);
-			padding-block-start: var(--pr-t-spacings-100);
-			border-block-start: var(--commons-divider-width) solid var(--palettes-neutral-200);
 		}
 	}
 }

package/src/components/calloutPopover/mods.scss

@@ -24,9 +24,8 @@
 
 @mixin overlayS {
 	--components-calloutPopover-width: 20rem;
-	--components-calloutPopover-content-margin: 1.75rem;
 
-	.calloutPopover-overlay-head-icon {
+	.calloutPopover-overlay-icon {
 		@include icon.S;
 	}
 
@@ -41,9 +40,7 @@
 }
 
 @mixin overlayIconless {
-	--components-calloutPopover-content-margin: 0;
-
-	.calloutPopover-overlay-head-icon {
+	.calloutPopover-overlay-icon {
 		display: none;
 	}
 }

package/src/components/calloutPopover/vars.scss

@@ -4,7 +4,6 @@
 	@at-root ($atRoot) {
 		:root {
 			--components-calloutPopover-width: 30rem;
-			--components-calloutPopover-content-margin: 2rem;
 		}
 	}
 }

package/src/components/chip/component.scss

@@ -15,8 +15,13 @@
 	padding-block: calc(var(--pr-t-spacings-50) / 2);
 	padding-inline: var(--pr-t-spacings-100);
 	font: var(--components-chip-font);
+	max-inline-size: 100%;
 
 	@at-root ($atRoot) {
+		.chip-content {
+			outline: none;
+		}
+
 		.chip-kill {
 			@include reset.button;
 

package/src/components/chip/index.scss

@@ -28,5 +28,9 @@
 		&.is-disabled {
 			@include disabled;
 		}
+
+		&:has(.chip-content:focus-visible) {
+			@include focusVisible;
+		}
 	}
 }

package/src/components/chip/mods.scss

@@ -38,3 +38,7 @@
 		background-color: var(--palettes-600, var(--palettes-neutral-100));
 	}
 }
+
+@mixin focusVisible {
+	@include a11y.focusVisible;
+}

package/src/components/clear/component.scss

@@ -5,7 +5,7 @@
 @mixin component {
 	@include reset.button;
 
-	display: grid;
+	display: var(--components-clear-display);
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr;
 	grid-template-areas: 'main';

package/src/components/clear/index.scss

@@ -12,23 +12,36 @@
 		}
 
 		// .palette-primary is deprecated
-		&.palette-product:not([disabled]),
-		&.palette-primary:not([disabled]) {
+		&.palette-product,
+		&.palette-primary {
 			@include product;
 		}
 
-		&.mod-inverted:not([disabled]) {
+		&.mod-inverted {
 			@include inverted;
 
-			&.palette-product:not([disabled]) {
+			&:where(.palette-product) {
 				@include invertedProduct;
 			}
 		}
 
 		&[disabled] {
+			cursor: default;
+
 			@include disabled;
+		}
 
-			cursor: default;
+		&[hidden],
+		.filterPill[disabled] &,
+		.filterPill:not(.is-filled) &,
+		.textfield-input[disabled] &,
+		.textfield-input:not(.is-filled) &,
+		.textfield-input:not(.is-selected) & {
+			@include hidden;
+		}
+
+		.multiSelect.is-selected:has(.multipleSelect-clear) & {
+			--components-clear-display: grid;
 		}
 	}
 }

package/src/components/clear/mods.scss

@@ -38,6 +38,6 @@
 	}
 
 	&:active {
-		--components-clear-background: var(--palettes-product-50);
+		--components-clear-background: var(--palettes-product-100);
 	}
 }

package/src/components/clear/states.scss

@@ -1,4 +1,13 @@
 @mixin disabled {
 	--components-clear-cross-color: var(--palettes-neutral-500); // disabled token candidate
-	--components-clear-background: var(--palettes-neutral-300); // disabled token candidate
+
+	&,
+	&:hover,
+	&:active {
+		--components-clear-background: var(--palettes-neutral-300); // disabled token candidate
+	}
+}
+
+@mixin hidden {
+	--components-clear-display: none;
 }

package/src/components/clear/vars.scss

@@ -1,4 +1,5 @@
 @mixin vars {
+	--components-clear-display: grid;
 	--components-clear-size: 1rem;
 	--components-clear-background: var(--palettes-neutral-700);
 	--components-clear-cross-color: var(--palettes-neutral-0);

package/src/components/dataTable/component.scss

@@ -19,7 +19,7 @@
 		.dataTableWrapper {
 			border-radius: var(--components-dataTable-borderRadius);
 			border: 1px solid var(--commons-border-200);
-			overflow: var(--components-dataTable-overflow);
+			overflow: auto;
 			background-color: var(--components-dataTable-cell-background);
 			contain: paint; // Fix overflow on webkit when table has scroll
 			display: block;

package/src/components/dataTable/index.scss

@@ -83,6 +83,11 @@
 
 		&.mod-draggable {
 			@include draggable;
+
+			&:has([selectable]),
+			&.mod-selectable {
+				@include selectableDraggable;
+			}
 		}
 	}
 
@@ -133,3 +138,12 @@
 		}
 	}
 }
+
+// drag and drop preview
+:not(.dataTable-body) {
+	> .dataTable-body-row {
+		@layer components {
+			@include vars;
+		}
+	}
+}

package/src/components/dataTable/mods.scss

@@ -79,6 +79,19 @@
 	}
 }
 
+@mixin selectableDraggable {
+	.dataTable-head-row-cell,
+	.dataTable-body-row-cell,
+	.dataTable-foot-row-cell {
+		&:nth-child(2) {
+			--components-dataTable-cellFirst-width: 2.625rem;
+
+			inline-size: var(--components-dataTable-cellFirst-width);
+			max-inline-size: var(--components-dataTable-cellFirst-width);
+		}
+	}
+}
+
 @mixin tree {
 	@include buttonExpand;
 
@@ -142,7 +155,7 @@
 	}
 }
 
-@mixin cellFixedWidth {
+@mixin cellInlineSize {
 	min-inline-size: var(--dataTable-layoutFixed-width, auto);
 	inline-size: var(--dataTable-layoutFixed-width, auto);
 }
@@ -152,7 +165,7 @@
 		.dataTable-head-row-cell,
 		.dataTable-body-row-cell,
 		.dataTable-foot-row-cell {
-			@include cellFixedWidth;
+			@include cellInlineSize;
 		}
 	}
 
@@ -162,7 +175,7 @@
 				.dataTable-head-row-cell,
 				.dataTable-body-row-cell,
 				.dataTable-foot-row-cell {
-					@include cellFixedWidth;
+					@include cellInlineSize;
 				}
 			}
 		}

package/src/components/dataTable/vars.scss

@@ -11,7 +11,6 @@
 	--components-dataTable-tableLayout: auto;
 	--components-dataTable-cellFirst-width: auto;
 	--components-dataTable-row-display: table-row;
-	--components-dataTable-overflow: hidden;
 	--components-dataTable-expand-rotation: 180deg;
 	--components-dataTable-borderRadius: var(--pr-t-border-radius-structure);
 }

package/src/components/dataTableSticked/index.scss

@@ -12,10 +12,12 @@
 			@include stickyHeader;
 		}
 
+		&:has(.dataTableShadows),
 		&:has(.dataTable.mod-columnsOverflow) {
 			@include columnsOverflow;
 		}
 
+		&:has(.dataTableShadows),
 		&:has(.dataTable.mod-rowsOverflow) {
 			@include rowsOverflow;
 		}
@@ -43,6 +45,14 @@
 				@include stickyColumnBorder;
 			}
 		}
+
+		&:has(.dataTable.is-firstColumnVisibleAfterColsStart) {
+			@include firstColumnVisibleAfterColsStart;
+		}
+
+		&:has(.dataTable.is-lastColumnVisibleBeforeColsEnd) {
+			@include lastColumnVisibleBeforeColsEnd;
+		}
 	}
 
 	&:has(.dataTable-head.is-firstBodyRowVisible) {

package/src/components/dataTableSticked/mods.scss

@@ -1,8 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin stickyHeader {
-	--components-dataTable-overflow: auto;
-
 	.dataTable-head {
 		position: sticky;
 		inset-block-start: -1px;
@@ -22,8 +20,6 @@
 }
 
 @mixin columnsOverflow {
-	--components-dataTable-overflow: auto;
-
 	display: flex;
 
 	&::before,
@@ -52,11 +48,10 @@
 }
 
 @mixin rowsOverflow {
-	--components-dataTable-overflow: auto;
-
 	.dataTableShadows {
 		display: flex;
 		flex-direction: column;
+		flex-grow: 1;
 
 		&::before,
 		&::after {
@@ -85,8 +80,6 @@
 }
 
 @mixin stickyColumn {
-	--components-dataTable-overflow: auto;
-
 	%addShadow {
 		content: '';
 		position: absolute;
@@ -130,6 +123,8 @@
 				&:not(:has(+ :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell).mod-stickyColumn)) {
 					&::after {
 						@extend %addShadow;
+
+						opacity: var(--components-dataTable-shadow-colsStart-opacity);
 					}
 				}
 			}
@@ -143,6 +138,7 @@
 					inset-inline-start: auto;
 					inset-inline-end: 100%;
 					transform: scaleX(-1);
+					opacity: var(--components-dataTable-shadow-colsEnd-opacity);
 				}
 
 				& ~ :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell).mod-stickyColumn {

package/src/components/dataTableSticked/states.scss

@@ -18,3 +18,10 @@
 	--components-dataTable-header-shadow-opacity: 0;
 }
 
+@mixin firstColumnVisibleAfterColsStart {
+	--components-dataTable-shadow-colsStart-opacity: 0;
+}
+
+@mixin lastColumnVisibleBeforeColsEnd {
+	--components-dataTable-shadow-colsEnd-opacity: 0;
+}

package/src/components/dataTableSticked/vars.scss

@@ -4,4 +4,6 @@
 	--components-dataTable-shadow-firstRowOpacity: 1;
 	--components-dataTable-shadow-lastRowOpacity: 1;
 	--components-dataTable-header-shadow-opacity: 1;
+	--components-dataTable-shadow-colsStart-opacity: 1;
+	--components-dataTable-shadow-colsEnd-opacity: 1;
 }

package/src/components/dialog/component.scss

@@ -76,19 +76,6 @@
 			}
 		}
 
-		.dialog-inside-header-button {
-			&.button {
-				@include button.ghost;
-				@include button.S;
-				@include button.onlyIconS;
-
-				align-self: start;
-				justify-self: end;
-				grid-area: close;
-				display: var(--components-dialog-insideHeaderButtonDisplay);
-			}
-		}
-
 		.dialog-inside-header-actionOptional {
 			margin-right: calc(var(--pr-t-spacings-100) * -1);
 
@@ -138,7 +125,7 @@
 			padding: var(--components-dialog-insideHeaderTitlePadding);
 			text-align: var(--components-dialog-insideHeaderTitleAlign);
 			margin: 0;
-			overflow-wrap: break-word;
+			overflow-wrap: anywhere;
 		}
 
 		.dialog_backdrop {

package/src/components/dialog/index.scss

@@ -56,5 +56,9 @@
 		&.mod-fullScreen {
 			@include fullScreen;
 		}
+
+		&:has(.dialog-inside-header-button) {
+			@include withCloseButton;
+		}
 	}
 }

package/src/components/dialog/mods.scss

@@ -1,3 +1,4 @@
+@use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/components/title/exports' as title;
 @use '@lucca-front/scss/src/commons/utils/keyframe';
@@ -68,3 +69,17 @@
 @mixin neutralBackground {
 	--components-dialog-insideContent-background: var(--pr-t-elevation-surface-default);
 }
+
+@mixin withCloseButton {
+	.dialog-inside-header-button.button {
+		@include button.ghost;
+		@include button.S;
+		@include button.onlyIconS;
+
+		align-self: start;
+		justify-self: end;
+		grid-area: close;
+		display: var(--components-dialog-insideHeaderButtonDisplay);
+	}
+}
+

package/src/components/fancyBox/component.scss

@@ -1,29 +1,22 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	overflow: hidden;
-	padding-inline: var(--pr-t-spacings-200);
-	display: block;
-	position: relative;
-	z-index: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding-inline: var(--components-fancyBox-paddingInline);
+	margin-inline: var(--components-fancyBox-marginInline);
+	contain: layout;
 
 	@at-root ($atRoot) {
 		.fancyBox-content {
-			display: flex;
-			flex-direction: column;
-			margin-block: 0;
-			margin-inline: auto;
-			min-block-size: 10rem;
-			min-inline-size: min(20rem, 100%);
-			padding-block: var(--pr-t-spacings-300);
-			inline-size: fit-content;
-			position: relative;
-		}
-
-		.fancyBox-content-box {
 			position: relative;
-			padding-block: var(--pr-t-spacings-300);
-			padding-inline: var(--pr-t-spacings-700);
+			min-block-size: var(--components-fancyBox-contentMinBlockSize);
+			min-inline-size: var(--components-fancyBox-contentMinInlineSize);
+			max-inline-size: 100%;
+			padding-block: var(--components-fancyBox-contentPaddingBlock);
+			padding-inline: var(--components-fancyBox-contentPaddingInline);
 			background-color: var(--pr-t-elevation-surface-raised);
 			border-radius: var(--pr-t-border-radius-structure);
 			flex-grow: 1;
@@ -42,6 +35,7 @@
 				background-repeat: no-repeat;
 				background-size: contain;
 				transition-duration: var(--commons-animations-durations-slow);
+				pointer-events: none;
 			}
 
 			&::before {
@@ -59,7 +53,7 @@
 			}
 		}
 
-		.fancyBox-content-box-foreground {
+		.fancyBox-content-foreground {
 			position: absolute;
 			inline-size: var(--components-fancyBox-imageWidth);
 			block-size: var(--components-fancyBox-imageHeight);
@@ -70,6 +64,7 @@
 			background-size: contain;
 			transition-property: width, height, top, right;
 			transition-duration: var(--commons-animations-durations-slow);
+			pointer-events: none;
 		}
 	}
 }