@lucca-front/scss 21.1.2 → 21.2.0-rc.1

package/src/components/button/index.scss

@@ -42,16 +42,16 @@
 		}
 
 		// .mod-outline is deprecated
-		&.mod-outlined,
-		&.mod-outline {
+		&.mod-outline,
+		&.mod-outlined {
 			&:where(:not(.is-success, .is-error)) {
 				@include outlined;
 			}
 		}
 
 		// .mod-link .mod-text deprecated
-		&.mod-text,
 		&.mod-link,
+		&.mod-text,
 		&.mod-ghost {
 			&:where(:not(.is-success, .is-error)) {
 				@include ghost;
@@ -109,25 +109,26 @@
 		}
 
 		// .mod-delete is deprecated
-		&.mod-critical, &.mod-delete {
+		&.mod-delete,
+		&.mod-critical {
 			@include critical;
 
 			// .mod-link is deprecated
-			&.mod-text,
-			&.mod-link {
+			&.mod-link,
+			&.mod-text {
 				@include criticalGhost;
 			}
 
 			// .mod-outline is deprecated
-			&.mod-outlined,
-			&.mod-outline {
+			&.mod-outline,
+			&.mod-outlined {
 				@include criticalOutlined;
 			}
 		}
 
 		// .mod-invert is deprecated
-		&.mod-inverted,
-		&.mod-invert {
+		&.mod-invert,
+		&.mod-inverted {
 			@include inverted;
 		}
 
@@ -144,8 +145,8 @@
 		}
 
 		// .loading is deprecated
-		&.is-loading,
-		&.loading {
+		&.loading,
+		&.is-loading {
 			@include loading;
 
 			&.mod-S {
@@ -166,14 +167,14 @@
 		}
 
 		// .error is deprecated
-		&.is-error,
-		&.error {
+		&.error,
+		&.is-error {
 			@include error;
 		}
 
 		// .success is deprecated
-		&.is-success,
-		&.success {
+		&.success,
+		&.is-success {
 			@include success;
 
 			&.mod-AI,
@@ -195,9 +196,9 @@
 		}
 
 		// .disabled is deprecated
-		&.is-disabled,
 		&.disabled,
-		&[aria-disabled="true"] {
+		&.is-disabled,
+		&[aria-disabled='true'] {
 			@include disabled;
 		}
 	}

package/src/components/button/mods.scss

@@ -4,6 +4,23 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
+@mixin M {
+	@include icons.M;
+
+	--components-button-font: var(--pr-t-font-body-M);
+	--components-button-paddingBlock: var(--pr-t-spacings-100);
+	--components-button-paddingInline: var(--pr-t-spacings-150);
+	--components-button-gap: var(--pr-t-spacings-100);
+
+	.numericBadge {
+		@include numericBadge.M;
+	}
+
+	// Deprecated
+	--components-button-font-size: var(--pr-t-font-body-M-fontSize);
+	--components-button-line-height: var(--pr-t-font-body-M-lineHeight);
+}
+
 @mixin S {
 	@include icons.S;
 
@@ -63,7 +80,7 @@
 	&:hover {
 		--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));
 		--components-button-color: var(--palettes-700, var(--palettes-neutral-700));
-		--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))
+		--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));
 	}
 
 	&:active {
@@ -263,11 +280,12 @@
 	--components-button-backgroundColor: transparent;
 	--components-button-color: var(--palettes-neutral-0);
 
-	background-image: linear-gradient(
-		-135deg,
-		color-mix(in srgb, var(--palettes-AI-500) var(--components-button-AI-background-opacity), transparent),
-		color-mix(in srgb, var(--palettes-brand-400) var(--components-button-AI-background-opacity), transparent)
-	);
+	background-image:
+		linear-gradient(
+			-135deg,
+			color-mix(in srgb, var(--palettes-AI-500) var(--components-button-AI-background-opacity), transparent),
+			color-mix(in srgb, var(--palettes-brand-400) var(--components-button-AI-background-opacity), transparent)
+		);
 
 	&:hover,
 	&:focus-visible {

package/src/components/button/states.scss

@@ -41,9 +41,12 @@
 @mixin loadingXS {
 	@include loading.spinner(var(--pr-t-font-body-XS-lineHeight));
 
+	// stylelint-disable block-no-redundant-nested-style-rules -- Prevent issues with mixed declarations.
+	// SEE: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
 	& {
 		--commons-loading-borderWidth: 2px;
 	}
+	// stylelint-enable
 }
 
 @mixin loadingOutlined {
@@ -140,7 +143,6 @@
 	}
 }
 
-
 @mixin error {
 	animation-name: shake;
 	animation-iteration-count: 1;

package/src/components/calendar/component.scss

@@ -1,5 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/overflow';
 @use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/components/link/exports' as link;
 
@@ -82,12 +83,8 @@
 			overflow: auto;
 			scroll-behavior: smooth;
 			scroll-snap-type: x mandatory;
-			-ms-overflow-style: none;
-			scrollbar-width: none;
 
-			&::-webkit-scrollbar {
-				display: none;
-			}
+			@include overflow.hide;
 
 			&:focus-visible {
 				@include a11y.focusVisible;
@@ -221,6 +218,8 @@
 			block-size: 100%;
 			text-transform: lowercase;
 			cursor: var(--components-calendar-table-body-row-cell-actionCursor);
+
+			/* autoprefixer: off */
 			text-decoration: var(--components-calendar-table-body-row-cell-actionTextDecoration);
 			box-shadow:
 				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight),

package/src/components/calendar/index.scss

@@ -93,4 +93,3 @@
 		}
 	}
 }
-

package/src/components/callout/index.scss

@@ -20,4 +20,3 @@
 		@include actionsInline;
 	}
 }
-

package/src/components/calloutAccordion/states.scss

@@ -1,5 +1,5 @@
 @mixin open {
-  .calloutAccordion-summary-chevron {
-    transform: rotate(180deg);
-  }
+	.calloutAccordion-summary-chevron {
+		transform: rotate(180deg);
+	}
 }

package/src/components/calloutDisclosure/mods.scss

@@ -3,7 +3,7 @@
 
 @mixin S {
 	--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-100);
-  --components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-75);
+	--components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-75);
 	--components-calloutDisclosure-gap: var(--pr-t-spacings-100);
 
 	.calloutDisclosure-summary-title {

package/src/components/calloutDisclosure/states.scss

@@ -1,5 +1,5 @@
 @mixin open {
-  .calloutDisclosure-summary-chevron {
-    transform: rotate(-180deg);
-  }
+	.calloutDisclosure-summary-chevron {
+		transform: rotate(-180deg);
+	}
 }

package/src/components/calloutDisclosure/vars.scss

@@ -1,6 +1,6 @@
 @mixin vars {
 	--components-calloutDisclosure-padding: var(--components-calloutDisclosure-paddingVertical) var(--components-calloutDisclosure-paddingHorizontal);
-  --components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-150);
-  --components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-100);
+	--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-150);
+	--components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-100);
 	--components-calloutDisclosure-gap: var(--pr-t-spacings-150);
 }

package/src/components/calloutFeedbackList/vars.scss

@@ -1,6 +1,6 @@
 @mixin vars {
-  --components-calloutFeedbackList-font: var(--pr-t-font-body-M);
-  --components-calloutFeedbackList-gap: var(--pr-t-spacings-150);
+	--components-calloutFeedbackList-font: var(--pr-t-font-body-M);
+	--components-calloutFeedbackList-gap: var(--pr-t-spacings-150);
 
 	// Deprecated
 	--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-M-fontSize);

package/src/components/calloutPopover/component.scss

@@ -54,7 +54,6 @@
 			@include icon.M;
 
 			color: var(--palettes-700, var(--palettes-neutral-700));
-
 		}
 
 		.calloutPopover-overlay-content {

package/src/components/checkboxField/component.scss

@@ -63,7 +63,7 @@
 				line-height: 1;
 				text-transform: none;
 				white-space: nowrap;
-				word-wrap: normal;
+				overflow-wrap: normal;
 				content: '\e97d' / '';
 			}
 		}

package/src/components/checkboxField/mods.scss

@@ -7,6 +7,7 @@
 }
 
 @mixin checklist {
+	// stylelint-disable-next-line declaration-property-value-disallowed-list -- --commons-borderRadius-full is deprecated
 	--component-checkboxField-borderRadius: var(--commons-borderRadius-full);
 	--component-checkboxField-borderColor: var(--palettes-neutral-300);
 	--component-checkboxField-icon-color: var(--palettes-neutral-300);
@@ -18,15 +19,15 @@
 
 	@keyframes checklist-bounce {
 		0% {
-				transform: scale(1);
+			transform: scale(1);
 		}
 
 		55% {
-				transform: scale(1.3);
+			transform: scale(1.3);
 		}
 
 		100% {
-				transform: scale(1);
+			transform: scale(1);
 		}
 	}
 }

package/src/components/checkboxField/states.scss

@@ -114,7 +114,6 @@
 	}
 }
 
-
 @mixin checklistHover {
 	~ .checkboxField-icon {
 		--component-checkboxField-backgroundColor: var(--palettes-success-50);

package/src/components/color/component.scss

@@ -61,7 +61,7 @@
 		}
 	}
 
-	[role="listbox"] {
+	[role='listbox'] {
 		display: flex;
 		flex-wrap: wrap;
 		padding: var(--pr-t-spacings-100);

package/src/components/color/index.scss

@@ -19,12 +19,12 @@
 			@include XL;
 		}
 
-		[aria-selected="true"] & {
+		[aria-selected='true'] & {
 			@include selected;
 		}
 
 		.optionItem.is-highlighted &,
-		[role="listbox"] .optionItem:hover & {
+		[role='listbox'] .optionItem:hover & {
 			@include highlighted;
 		}
 	}

package/src/components/color/states.scss

@@ -3,7 +3,7 @@
 }
 
 @mixin highlighted {
-	--components-color-value-scale: calc(7/6);
+	--components-color-value-scale: calc(7 / 6);
 }
 
 @mixin selectedNotFilled {

package/src/components/color/vars.scss

@@ -4,7 +4,7 @@
 	--components-color-value-inlineSize: var(--pr-t-spacings-250);
 	--components-color-value-boxShadowColor: transparent;
 	--components-color-value-backgroundColor: transparent;
-	--components-color-value-channel: clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255);
+	--components-color-value-channel: clamp(0, (((r * 0.299) + (g * 0.587) + (b * 0.114)) - 128) * -1000, 255);
 }
 
 @mixin varsPicker {

package/src/components/comment/component.scss

@@ -3,7 +3,6 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	container: comment / inline-size;
 	display: flex;
 	flex-direction: column;
 	gap: var(--pr-t-spacings-50);
@@ -11,6 +10,10 @@
 	align-items: var(--components-comment-align);
 	margin-inline-start: var(--components-comment-margin);
 
+	&:has(.comment-infos) {
+		container: comment / inline-size;
+	}
+
 	.avatar {
 		@include avatar.XS;
 	}

package/src/components/comment/index.scss

@@ -17,8 +17,10 @@
 			@include noAvatar;
 		}
 
-		@include container.max(25rem, $name: 'comment') {
-			@include narrow;
+		&:has(.comment-infos) {
+			@include container.max(25rem, $name: 'comment') {
+				@include narrow;
+			}
 		}
 	}
 }

package/src/components/comment/mods.scss

@@ -45,7 +45,10 @@
 		--components-comment-background-color: var(--palettes-product-50);
 		--components-comment-align: end;
 		--components-comment-margin: auto;
-		--components-comment-border-radius: var(--pr-t-border-radius-default) var(--pr-t-border-radius-small) var(--pr-t-border-radius-default)
+		--components-comment-border-radius:
+			var(--pr-t-border-radius-default)
+			var(--pr-t-border-radius-small)
+			var(--pr-t-border-radius-default)
 			var(--pr-t-border-radius-default);
 	}
 

package/src/components/dataTable/index.scss

@@ -91,7 +91,7 @@
 		}
 	}
 
-		:is(.dataTable-body-row, .dataTable-foot-row) {
+	:is(.dataTable-body-row, .dataTable-foot-row) {
 		&:has([selectable]),
 		&.mod-selectable {
 			&:has(input:checked) {

package/src/components/dataTable/mods.scss

@@ -95,10 +95,12 @@
 @mixin tree {
 	@include buttonExpand;
 
-	--components-dataTable-cell-paddingInlineStart: calc(
-		var(--components-dataTable-cell-padding-inline) + var(--pr-t-spacings-300) * calc(var(--components-dataTable-treeLevel) - 1) +
-			var(--components-dataTable-tree-extraPadding)
-	);
+	--components-dataTable-cell-paddingInlineStart:
+		calc(
+			var(--components-dataTable-cell-padding-inline)
+			+ var(--pr-t-spacings-300) * calc(var(--components-dataTable-treeLevel) - 1)
+			+ var(--components-dataTable-tree-extraPadding)
+		);
 }
 
 @mixin editable {

package/src/components/dataTableSticked/mods.scss

@@ -163,7 +163,9 @@
 			}
 
 			&:last-child {
-				--components-dataTable-cell-shadow: 0 1px inset var(--commons-border-200), 1px 0 inset var(--commons-border-200),
+				--components-dataTable-cell-shadow:
+					0 1px inset var(--commons-border-200),
+					1px 0 inset var(--commons-border-200),
 					1px 0 var(--palettes-neutral-0); // white shadow is for Chrome
 			}
 		}

package/src/components/dialog/component.scss

@@ -10,6 +10,7 @@
 	inset: var(--components-dialog-inset);
 	inline-size: var(--components-dialog-width);
 	block-size: var(--components-dialog-height);
+	min-block-size: var(--components-dialog-minBlockSize);
 	background-color: var(--palettes-neutral-0);
 	border-radius: var(--components-dialog-borderRadius);
 	box-shadow: var(--pr-t-elevation-shadow-overlay);
@@ -36,15 +37,17 @@
 			&:has(.dialog-inside-formOptional, .dialog-formOptional, .dialog-form) {
 				display: contents;
 
-				.dialog-inside-formOptional,
-				.dialog-formOptional,
-				.dialog-form {
+				.dialog-formOptional, // stylelint-disable-line selector-disallowed-list -- .dialog-formOptional is deprecated
+				.dialog-form, // stylelint-disable-line selector-disallowed-list -- .dialog-form is deprecated
+				.dialog-inside-formOptional {
+					padding-inline-end: var(--components-dialog-inside-paddingInlineEnd);
 					display: grid;
 					grid-template-areas:
-						'header'
+						'header  '
 						'overflow'
-						'footer';
-					grid-template-rows: auto 1fr auto;
+						'footer  ';
+					align-content: var(--components-dialog-inside-alignContent);
+					grid-template-rows: var(--components-dialog-inside-gridTemplateRows);
 					flex-grow: 1;
 					min-block-size: 0;
 
@@ -62,12 +65,14 @@
 			&:not(:has(.dialog-inside-formOptional, .dialog-formOptional, .dialog-form)) {
 				display: grid;
 				grid-template-areas:
-					'header'
+					'header  '
 					'overflow'
-					'footer';
-				grid-template-rows: auto 1fr auto;
+					'footer  ';
+				align-content: var(--components-dialog-inside-alignContent);
+				grid-template-rows: var(--components-dialog-inside-gridTemplateRows);
 				flex-grow: 1;
 				min-block-size: 0;
+				padding-inline-end: var(--components-dialog-inside-paddingInlineEnd);
 
 				&:has(.dialog-inside-content:focus-visible) {
 					&::after {
@@ -80,6 +85,28 @@
 			}
 		}
 
+		.dialog-inside-fancyIllustrations {
+			position: absolute;
+			inset-block-start: 0;
+			inset-inline-end: 0;
+			inline-size: var(--components-dialog-inside-fancyIllustrations-inlineSize);
+			display: flex;
+
+			// to target the SVG injected into the page
+			> * {
+				inline-size: 100%;
+				block-size: auto;
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				background-image: var(--components-dialog-inside-backgroundImage);
+				background-size: cover;
+			}
+		}
+
 		.dialog-inside-header-actionOptional {
 			margin-right: calc(var(--pr-t-spacings-100) * -1);
 
@@ -92,28 +119,32 @@
 			grid-area: footer;
 
 			&.footer {
-				background-color: transparent;
-				position: relative;
-				overflow: hidden;
+				@include footer.insideDialog;
 			}
 		}
 
 		.dialog-inside-header {
 			display: grid;
-			padding-block: var(--pr-t-spacings-200);
-			padding-inline: var(--pr-t-spacings-300);
+			padding-block: var(--components-dialog-inside-header-paddingBlock);
+			padding-inline: var(--components-dialog-inside-header-paddingInline);
 			grid-template-areas: var(--components-dialog-insideHeaderAreas);
 			grid-template-columns: var(--components-dialog-insideHeaderColumns);
-			box-shadow: 0 1px 0 0 var(--palettes-neutral-100);
+			box-shadow: var(--components-dialog-inside-header-boxShadow);
 			gap: var(--pr-t-spacings-200);
-			position: relative;
+			position: var(--components-dialog-inside-header-position);
 			z-index: 1;
 			grid-area: header;
 		}
 
+		.dialog-inside-header-button {
+			position: var(--components-dialog-inside-header-button-position);
+			inset-block-start: var(--components-dialog-inside-header-button-insetBlockStart);
+			inset-inline-end: var(--components-dialog-inside-header-button-insetBlockEnd);
+		}
+
 		.dialog-inside-content {
 			background-color: var(--components-dialog-insideContent-background);
-			padding-block: var(--pr-t-spacings-200);
+			padding-block: var(--components-dialog-insideContent-paddingBlock);
 			padding-inline: var(--pr-t-spacings-300);
 			grid-area: overflow;
 			overflow: auto;

package/src/components/dialog/index.scss

@@ -48,8 +48,9 @@
 				@include fromBottom;
 			}
 
-			@include media.max('XXS') {
+			@include media.max('S') {
 				@include fromBottom;
+				@include maxContent;
 			}
 		}
 
@@ -65,8 +66,16 @@
 			@include withAction;
 		}
 
-		&.mod-stacked {
-			@include stacked;
+		&.mod-fancy {
+			@include fancy;
+
+			@include media.max('XS') {
+				@include fancySmall;
+			}
+
+			@include media.max('XXS') {
+				@include fancyNarrow;
+			}
 		}
 	}
 }