@lucca-front/scss 19.3.0-rc.2 → 19.3.0-rc.4

package/src/components/loading/mods.scss

@@ -11,6 +11,10 @@
 	}
 }
 
+@mixin S {
+	--components-loading-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
+}
+
 @mixin L {
 	@include block;
 

package/src/components/mobileNavigation/component.scss

@@ -13,6 +13,7 @@
 	@at-root ($atRoot) {
 		.mobileNavigation-list {
 			@include reset.list;
+
 			display: flex;
 		}
 
@@ -34,7 +35,7 @@
 			text-decoration: none;
 
 			&:focus-visible {
-				@include a11y.focusVisible($offset: 0px);
+				@include a11y.focusVisible($offset: 0);
 			}
 
 			.lucca-icon {
@@ -50,6 +51,7 @@
 		.mobileNavigation-list-item-link-counter {
 			--components-numericBadge-background: var(--palettes-product-200);
 			--components-numericBadge-color: var(--palettes-product-800);
+
 			box-shadow: 0 0 0 2px var(--palettes-neutral-0);
 			position: absolute;
 			inset-inline-start: calc(50% + 5px);

package/src/components/multiSelect/component.scss

@@ -73,6 +73,7 @@
 		.multipleSelect-arrow,
 		.multipleSelect-searchIcon {
 			@include icon.M;
+
 			color: var(--components-multiSelect-arrow-color);
 			transition-property: transform;
 			transition-duration: var(--commons-animations-durations-standard);

package/src/components/multiSelect/mods.scss

@@ -16,6 +16,10 @@
 		@include icon.S;
 	}
 
+	.multipleSelect-searchIcon {
+		@include icon.S;
+	}
+
 	.multipleSelect-clear {
 		// :not(.class) is only there to increase specificity when the class isn’t present
 		// but the class should be present, and this code is temporary
@@ -67,7 +71,6 @@
 	box-shadow: none;
 	padding: 0;
 	gap: 0;
-
 	width: 21rem;
 	max-inline-size: calc(100vw - 2.5rem);
 

package/src/components/multiSelect/states.scss

@@ -14,6 +14,7 @@
 	--components-multiSelect-background: var(--commons-disabled-background);
 	--components-multiSelect-placeholder: var(--commons-disabled-placeholder);
 	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);
+
 	pointer-events: none;
 }
 

package/src/components/navside/component.scss

@@ -44,7 +44,6 @@
 			overflow-x: hidden;
 			overflow-y: auto;
 			position: relative;
-
 			scrollbar-face-color: var(--components-navSide-scrollbar-thumb-color);
 			scrollbar-arrow-color: var(--components-navSide-scrollbar-arrow-color);
 			scrollbar-track-color: var(--components-navSide-scrollbar-bg-color);
@@ -133,7 +132,6 @@
 			margin-inline-start: auto;
 			display: grid;
 			place-items: center;
-			transform: rotate(0);
 			flex-shrink: 0;
 			transform-origin: 50% 50%;
 			transform: rotate(90deg);

package/src/components/notchBox/component.scss

@@ -1,5 +1,6 @@
 @mixin component {
 	position: relative;
+
 	.notchBox-wrapper {
 		inline-size: 100%;
 		min-block-size: var(--component-notchbox-box-min-height);
@@ -53,6 +54,7 @@
 		background-repeat: no-repeat;
 		filter: drop-shadow(var(--component-notchbox-box-shadow));
 	}
+
 	.notchBox-badge {
 		position: absolute;
 		inset-block-start: var(--component-notchbox-badge-top, auto);

package/src/components/notchBox/mods.scss

@@ -1,3 +1,5 @@
+// stylelint-disable custom-property-empty-line-before -- Complex code with visual grouping of declarations.
+
 %commons {
 	--smooth: 1px;
 	--component-notchbox-notch-radius-outer: var(--component-notchbox-notch-radius);
@@ -124,6 +126,7 @@
 		var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
 			var(--smooth) * 2
 	);
+
 	/** badge */
 	--component-notchbox-badge-actualWidth: var(--component-notchbox-badge-height);
 	--component-notchbox-badge-actualHeight: var(--component-notchbox-badge-width);

package/src/components/numericBadge/component.scss

@@ -13,8 +13,6 @@
 	background-color: var(--components-numericBadge-background);
 	color: var(--components-numericBadge-color);
 	border-radius: var(--components-numericBadge-borderRadius);
-	transition-property: background-color, color;
-	transition-duration: var(--commons-animations-durations-fast);
 	transition-timing-function: ease;
 	white-space: nowrap;
 	position: relative;
@@ -23,6 +21,7 @@
 
 	&:empty {
 		&::before {
+			// stylelint-disable-next-line no-irregular-whitespace -- Don’t wrap content because of a space.
 			content: ' ';
 		}
 	}

package/src/components/pagination/component.scss

@@ -28,7 +28,7 @@
 		.pagination-navigation {
 			list-style: none;
 			padding: 0;
-			margin-block: 0 0;
+			margin-block: 0;
 
 			> *:not(:last-child) {
 				margin-inline-end: var(--pr-t-spacings-50);

package/src/components/popover/component.scss

@@ -60,6 +60,7 @@
 			transform: scale(0.95);
 			opacity: 0.5;
 		}
+
 		to {
 			transform: scale(1);
 			opacity: 1;

package/src/components/radio/component.scss

@@ -44,7 +44,7 @@
 			}
 		}
 
-		&:focus-visible ~ .radio-label:before {
+		&:focus-visible ~ .radio-label::before {
 			@include a11y.focusVisible;
 		}
 	}

package/src/components/radioButtons/component.scss

@@ -25,17 +25,6 @@
 			}
 		}
 
-		.radioButtons-item-input {
-			@include a11y.mask;
-
-			&:checked,
-			&:focus {
-				~ .radioButtons-item-label {
-					z-index: 2;
-				}
-			}
-		}
-
 		.radioButtons-item-label {
 			display: flex;
 			align-items: center;
@@ -55,6 +44,15 @@
 		}
 
 		.radioButtons-item-input {
+			@include a11y.mask;
+
+			&:checked,
+			&:focus {
+				~ .radioButtons-item-label {
+					z-index: 2;
+				}
+			}
+
 			&:not(:disabled, .is-disabled) {
 				~ .radioButtons-item-label {
 					&:hover {

package/src/components/radioField/component.scss

@@ -45,6 +45,7 @@
 			transform: scale(0);
 			transition-property: transform;
 			transition-duration: var(--commons-animations-durations-fast);
+
 			// transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 0);
 
 			@media (prefers-reduced-motion: reduce) {

package/src/components/radioField/states.scss

@@ -19,13 +19,6 @@
 	}
 }
 
-@mixin checkedHover {
-	~ .radioField-icon {
-		background-color: var(--palettes-product-600);
-		border-color: var(--palettes-product-600);
-	}
-}
-
 @mixin checkedActive {
 	~ .radioField-icon {
 		background-color: var(--palettes-product-800);
@@ -72,7 +65,7 @@
 @mixin focusVisible {
 	~ .radioField-icon {
 		&::after {
-			@include a11y.focusVisible();
+			@include a11y.focusVisible;
 		}
 	}
 }

package/src/components/segmentedControl/component.scss

@@ -27,7 +27,7 @@
 			}
 		}
 
-		//.viewTabs-item is deprecated
+		// .viewTabs-item is deprecated
 		.segmentedControl-item,
 		.viewTabs-item {
 			flex-grow: 1;
@@ -57,7 +57,7 @@
 			}
 		}
 
-		//.viewTabs-item-tab is deprecated
+		// .viewTabs-item-tab is deprecated
 		.segmentedControl-item-action,
 		.viewTabs-item-tab {
 			inline-size: 100%;
@@ -97,7 +97,7 @@
 			}
 		}
 
-		//.viewTabs_panel is deprecated
+		// .viewTabs_panel is deprecated
 		.segmentedControl_panel,
 		.viewTabs_panel {
 			display: var(--components-segmentedControl-display, block);

package/src/components/simpleSelect/component.scss

@@ -21,6 +21,7 @@
 				--components-simpleSelect-border-color: var(--pr-t-color-input-border-hover);
 			}
 		}
+
 		.simpleSelect-field-input {
 			grid-column-start: 1;
 			grid-row-start: 1;

package/src/components/skeleton/component.scss

@@ -12,6 +12,7 @@
 		0% {
 			opacity: 0;
 		}
+
 		100% {
 			opacity: 1;
 		}

package/src/components/skeleton/states.scss

@@ -73,6 +73,7 @@
 		0% {
 			background-position: 150% 50%;
 		}
+
 		100% {
 			background-position: -150% 50%;
 		}
@@ -83,9 +84,11 @@
 		0% {
 			opacity: 0.9;
 		}
+
 		50% {
 			opacity: 1;
 		}
+
 		100% {
 			opacity: 0.9;
 		}

package/src/components/sortableList/component.scss

@@ -57,6 +57,7 @@
 
 			&::before {
 				@include icon.generate('drag');
+
 				vertical-align: top;
 			}
 		}

package/src/components/statusBadge/component.scss

@@ -8,7 +8,7 @@
 	font-size: var(--components-statusBadge-fontSize);
 	gap: var(--pr-t-spacings-50);
 	line-height: var(--components-statusBadge-lineHeight);
-	padding-block: calc(var(--pr-t-spacings-50) / 2) calc(var(--pr-t-spacings-50) / 2);
+	padding-block: calc(var(--pr-t-spacings-50) / 2);
 	padding-inline: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
 	white-space: nowrap;
 	font-weight: normal;

package/src/components/switchField/component.scss

@@ -53,11 +53,13 @@
 
 			&::before {
 				@include icon.generate('confirm');
+
 				font-size: var(--component-switchField-label-input-icon-fontSize);
 			}
 
 			&::after {
 				@include icon.generate('cross');
+
 				font-size: var(--component-switchField-label-input-icon-fontSize);
 			}
 		}
@@ -86,7 +88,7 @@
 
 			&:focus-visible {
 				~ .switchField-icon {
-					@include a11y.focusVisible();
+					@include a11y.focusVisible;
 				}
 			}
 		}

package/src/components/table/mods.scss

@@ -136,20 +136,6 @@
 	}
 }
 
-@mixin noOffset {
-	.table-head-row-cell,
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		&:first-child {
-			padding-inline-start: 0;
-		}
-
-		&:last-child {
-			padding-inline-end: 0;
-		}
-	}
-}
-
 @mixin header {
 	vertical-align: bottom;
 }

package/src/components/tableSortable/mods.scss

@@ -42,7 +42,8 @@
 		&::after {
 			transform: translateY(0);
 			opacity: 1;
-			@include a11y.focusVisible();
+
+			@include a11y.focusVisible;
 		}
 	}
 
@@ -113,7 +114,8 @@
 		&::before {
 			transform: translateY(0);
 			opacity: 1;
-			@include a11y.focusVisible();
+
+			@include a11y.focusVisible;
 		}
 	}
 

package/src/components/tableSortable/states.scss

@@ -21,7 +21,7 @@
 
 		&:focus-visible {
 			&::after {
-				@include a11y.focusVisible();
+				@include a11y.focusVisible;
 			}
 		}
 	}
@@ -50,7 +50,7 @@
 
 		&:focus-visible {
 			&::before {
-				@include a11y.focusVisible();
+				@include a11y.focusVisible;
 			}
 		}
 	}

package/src/components/tableSticked/index.scss

@@ -5,7 +5,7 @@
 .table {
 	@include vars;
 
-	//For both mod-stickyColumn + responsive variant
+	// For both mod-stickyColumn + responsive variant
 	&[class*='mod-stickyColumn'] {
 		@include stickyColumn;
 	}
@@ -22,7 +22,7 @@
 		}
 	}
 
-	//For both stickyHeader + -withBanner variant
+	// For both stickyHeader + -withBanner variant
 	&[class*='mod-stickyHeader'] {
 		@include stickyHeaderCommon;
 

package/src/components/tableSticked/mods.scss

@@ -9,52 +9,55 @@
 	min-inline-size: 100%;
 	background-color: var(--palettes-neutral-0);
 
-	//All stickies columns
+	// All stickies columns
 	[class*='mod-stickyColumn-'] {
 		background-color: var(--palettes-neutral-0);
 		z-index: 3;
 	}
 
-	//Left sticked columns
+	// Left sticked columns
 	[class*='mod-stickyColumn-left'] {
 		inset-inline-start: var(--components-tableSticked-column-sticky-offset);
 
-		//left sticked columns shadow
+		// left sticked columns shadow
 		&.mod-stickyColumn-shadow,
 		.stickyColumn-shadow-wrapper::before {
 			inset-inline-start: calc(
 				var(--components-tableSticked-column-sticky-offset) - var(--components-tableSticked-column-sticky-shadow-width)
 			);
 		}
+
 		.stickyColumn-shadow-wrapper::after {
 			inset-inline-start: var(--components-tableSticked-column-sticky-offset);
 			background-image: linear-gradient(to right, var(--components-tableSticked-column-sticky-shadow-color), transparent);
 		}
 	}
 
-	//Right sticked columns
+	// Right sticked columns
 	[class*='mod-stickyColumn-right'] {
 		inset-inline-end: var(--components-tableSticked-column-sticky-offset);
 
-		//right sticked columns shadow
+		// right sticked columns shadow
 		.stickyColumn-shadow-wrapper {
 			justify-items: end;
 			inline-size: calc(var(--components-tableSticked-column-sticky-shadow-width) * 3);
 			inset-inline-end: calc(var(--components-tableSticked-column-sticky-shadow-width) * -1);
 		}
+
 		&.mod-stickyColumn-shadow,
 		.stickyColumn-shadow-wrapper::before {
 			inset-inline-end: calc(
 				var(--components-tableSticked-column-sticky-offset) - var(--components-tableSticked-column-sticky-shadow-width)
 			);
 		}
+
 		.stickyColumn-shadow-wrapper::after {
 			inset-inline-end: var(--components-tableSticked-column-sticky-offset);
 			background-image: linear-gradient(to left, var(--components-tableSticked-column-sticky-shadow-color), transparent);
 		}
 	}
 
-	//Sticky columns drop shadow
+	// Sticky columns drop shadow
 	.mod-stickyColumn-shadow {
 		display: none;
 		inline-size: 0;
@@ -76,9 +79,11 @@
 			position: sticky;
 			grid-area: cell;
 		}
+
 		&::after {
 			inline-size: var(--components-tableSticked-column-sticky-shadow-width);
 		}
+
 		&::before {
 			z-index: 1;
 			inline-size: var(--components-tableSticked-column-sticky-shadow-width);
@@ -93,6 +98,7 @@
 
 		position: sticky;
 	}
+
 	.mod-stickyColumn-shadow {
 		display: table-cell;
 	}
@@ -106,6 +112,7 @@
 	.table-head-row-cell {
 		inset-block-start: 0;
 	}
+
 	.mod-stickyHeader-shadow .table-body-row-cell {
 		inset-block-start: calc(var(--table-stickyHeader-shadow-offset) + var(--components-tableSticked-column-sticky-shadow-width));
 	}
@@ -115,6 +122,7 @@
 	.table-head-row-cell {
 		inset-block-start: var(--commons-banner-height);
 	}
+
 	.mod-stickyHeader-shadow .table-body-row-cell {
 		inset-block-start: calc(
 			var(--table-stickyHeader-shadow-offset) + var(--commons-banner-height) + var(--components-tableSticked-column-sticky-shadow-width)
@@ -124,10 +132,12 @@
 
 @mixin stickyHeaderCommon {
 	margin-block-start: var(--components-tableSticked-column-sticky-shadow-width);
+
 	.table-head-row-cell {
 		background-color: var(--palettes-neutral-0);
 		position: sticky;
 		z-index: 5;
+
 		&[class*='mod-stickyColumn'] {
 			z-index: 7;
 		}

package/src/components/tag/component.scss

@@ -4,8 +4,6 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-tag-background);
 	border-radius: var(--commons-borderRadius-M);
-	font-size: var(--components-tag-fontSize);
-	line-height: var(--components-tag-lineHeight);
 	padding-block: 0;
 	padding-inline: var(--pr-t-spacings-50);
 	text-decoration: var(--components-tag-decoration);

package/src/components/textField/component.scss

@@ -106,6 +106,7 @@
 
 		.textField-input-affix-icon {
 			@include icon.M;
+
 			color: var(--pr-t-color-input-icon);
 			pointer-events: none;
 		}

package/src/components/textfields/component.scss

@@ -10,7 +10,7 @@
 			border: 0;
 			box-shadow: 0 0 0 1px var(--palettes-neutral-300);
 			line-height: var(--sizes-M-lineHeight);
-			-webkit-appearance: none;
+			appearance: none;
 			background-color: var(--palettes-neutral-0);
 			border-radius: var(--components-textfield-border-radius);
 			padding-block: var(--components-textfield-input-padding-vertical);

package/src/components/textfields/index.scss

@@ -106,7 +106,7 @@
 
 		&.textfield-input {
 			&.mod-icon {
-				@include SInputIcon;
+				@include inputIconS;
 			}
 		}
 	}
@@ -116,7 +116,7 @@
 
 		&.textfield-input {
 			&.mod-icon {
-				@include XSInputIcon;
+				@include inputIconXS;
 			}
 		}
 	}

package/src/components/textfields/mods.scss

@@ -121,12 +121,12 @@
 	}
 }
 
-@mixin SInputIcon {
+@mixin inputIconS {
 	line-height: var(--sizes-XS-lineHeight);
 	font-size: var(--sizes-S-fontSize);
 }
 
-@mixin XSInputIcon {
+@mixin inputIconXS {
 	line-height: var(--sizes-XS-lineHeight);
 	font-size: var(--sizes-S-fontSize);
 }
@@ -299,6 +299,7 @@
 		background-color: transparent;
 		padding-block: var(--pr-t-spacings-200) 0;
 		padding-inline: var(--pr-t-spacings-200) 2.5rem;
+
 		// todo: déplacer dans filters ?
 		block-size: var(--components-filters-height);
 		border-radius: 0;

package/src/components/textfields/states.scss

@@ -22,6 +22,7 @@
 
 	~ .textfield-clear {
 		--components-clear-cross-color: var(--palettes-neutral-500) !important; // disabled token candidate
+
 		pointer-events: none;
 	}
 }
@@ -217,15 +218,13 @@
 		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
 	}
 
-	&:focus {
-		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
-	}
-
 	~ .textfield-label {
 		color: var(--palettes-#{$state}-700);
 	}
 
 	&:focus {
+		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
+
 		~ .textfield-label {
 			color: var(--palettes-#{$state}-700);
 		}

package/src/components/timeline/component.scss

@@ -42,8 +42,9 @@
 			min-inline-size: 1.5rem;
 		}
 
-		.timeline-step-title,
-		.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon {
+		// stylelint-disable-next-line selector-not-notation
+		.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon,
+		.timeline-step-title {
 			&::before {
 				content: '';
 				color: var(--palettes-product-0);