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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "19.3.0-rc.3",
+  "version": "19.3.0-rc.4",
   "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": "19.3.0-rc.3"
+    "@lucca-front/icons": "19.3.0-rc.4"
   }
 }

package/src/commons/base.scss

@@ -62,6 +62,7 @@
 
 		p {
 			margin: 0;
+
 			@if config.$deprecatedSpacings {
 				margin-block-end: var(--pr-t-spacings-150);
 			}
@@ -71,6 +72,7 @@
 		ol {
 			margin: 0;
 			padding-inline-start: var(--pr-t-spacings-400);
+
 			@if config.$deprecatedSpacings {
 				margin-block-end: var(--pr-t-spacings-150);
 			}
@@ -99,7 +101,7 @@
 
 		button {
 			&:focus-visible {
-				@include a11y.focusVisible();
+				@include a11y.focusVisible;
 			}
 		}
 

package/src/commons/utils/color.scss

@@ -2,10 +2,12 @@
 @use 'sass:math';
 @use '@lucca-front/scss/src/commons/config';
 
+// stylelint-disable-next-line scss/no-global-function-names -- This is a redefinition of a deprecated SCSS function.
 @function transparentize($color, $amount: 50%, $space: var(--commons-colorSpace, srgb)) {
 	@if math.unit($amount) != '%' {
 		$amount: $amount * 100%;
 	}
+
 	@return color-mix(in $space, $color $amount, transparent);
 }
 

package/src/commons/utils/index.scss

@@ -258,11 +258,11 @@
 .u-noSpinButtons {
 	&::-webkit-outer-spin-button,
 	&::-webkit-inner-spin-button {
-		-webkit-appearance: none !important;
+		appearance: none !important;
 	}
 
 	&[type='number'] {
-		-moz-appearance: textfield !important;
+		appearance: textfield !important;
 	}
 }
 

package/src/commons/utils/keyframe.scss

@@ -177,6 +177,7 @@
 		0% {
 			transform: rotate(0deg);
 		}
+
 		100% {
 			transform: rotate(360deg);
 		}

package/src/commons/utils/loading.scss

@@ -13,7 +13,6 @@
 		margin: auto;
 		position: absolute;
 		border-style: solid;
-
 		animation-name: rotate;
 		animation-duration: var(--commons-loading-speed);
 		animation-timing-function: linear;
@@ -40,6 +39,7 @@
 		0% {
 			background-position: 100% 0%;
 		}
+
 		100% {
 			background-position: -100% 0%;
 		}

package/src/commons/utils/media.scss

@@ -28,6 +28,7 @@
 		$breakpoint: pxToEm(map.get(config.$breakpoints, $breakpoint));
 	}
 
+	// stylelint-disable-next-line scss/at-rule-no-unknown
 	@#{$at} #{$name} #{$reversed} (min-#{$property}: #{$breakpoint}) {
 		@content;
 	}
@@ -55,11 +56,13 @@
 		$breakpoint1: $breakpointTmp;
 	}
 
+	// stylelint-disable scss/at-rule-no-unknown
 	@#{$at} #{$name} (min-#{$property}: #{$breakpoint1}) {
 		@#{$at} #{$name} #{$reversed} (min-#{$property}: #{$breakpoint2}) {
 			@content;
 		}
 	}
+	// stylelint-enable
 }
 
 // les raccourcis vers les requêtes pour min/max/between
@@ -123,6 +126,7 @@
 }
 
 @mixin pointer($query, $any: false, $reversed: false) {
+	// stylelint-disable-next-line scss/at-rule-no-unknown
 	@#{if($reversed, 'media not', 'media')} (#{if($any, 'any-', '')}pointer: #{$query}) {
 		@content;
 	}

package/src/commons/utils/reset.scss

@@ -37,7 +37,7 @@
 		display: table #{$suffix};
 	}
 
-	&:after {
+	&::after {
 		clear: both #{$suffix};
 	}
 }

package/src/components/_sample/component.scss

@@ -5,12 +5,12 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	property: value;
-	property: var(--components-sample-property1);
+	// property: value;
+	// property: var(--components-sample-property1);
 
 	@at-root ($atRoot) {
 		.sample-subComponent {
-			property: var(--components-sample-property2);
+			// property: var(--components-sample-property2);
 		}
 	}
 }

package/src/components/avatar/component.scss

@@ -60,7 +60,6 @@
 
 			display: flex;
 			text-decoration: none;
-			color: var(--palettes-neutral-800);
 			transition: transform var(--commons-animations-durations-fast);
 			transform: scale(var(--components-avatarWrapper-scale));
 			color: currentColor;

package/src/components/avatar/mods.scss

@@ -79,6 +79,7 @@
 
 		&::before {
 			@include icon.generate('people_person');
+
 			color: var(--palettes-neutral-600);
 			font-weight: 400;
 			font-size: var(--components-avatar-placeholder-size);

package/src/components/box/index.scss

@@ -19,3 +19,7 @@
 		@include toggle;
 	}
 }
+
+.box-arrow {
+	@include arrow;
+}

package/src/components/box/mods.scss

@@ -46,6 +46,11 @@
 @mixin withArrow {
 	--components-box-border-radius: var(--commons-borderRadius-M);
 	--components-box-padding: var(--pr-t-spacings-200);
+
+	.box-arrow {
+		--components-box-arrow-bottom: 100%;
+		--components-box-arrow-left: var(--pr-t-spacings-75);
+	}
 }
 
 @mixin arrowS {

package/src/components/calendar/component.scss

@@ -88,6 +88,7 @@
 			&::-webkit-scrollbar {
 				display: none;
 			}
+
 			&:focus-visible {
 				@include a11y.focusVisible;
 			}
@@ -228,6 +229,7 @@
 			&:disabled,
 			&[aria-disabled='true'] {
 				--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-500);
+
 				text-decoration: line-through;
 				cursor: default;
 			}

package/src/components/calendar/states.scss

@@ -82,6 +82,7 @@
 
 	&::before {
 		inset-inline-start: var(--pr-t-spacings-75);
+
 		--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: var(--commons-borderRadius-L) 0 0 var(--commons-borderRadius-L);
 	}
 }
@@ -91,6 +92,7 @@
 
 	&::before {
 		inset-inline-end: var(--pr-t-spacings-75);
+
 		--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0 var(--commons-borderRadius-L) var(--commons-borderRadius-L) 0;
 	}
 }
@@ -118,6 +120,7 @@
 
 	&::before {
 		inset-inline-end: 0;
+
 		--components-calendar-table-body-row-cellSelectedBeforeContent: '';
 		--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: var(--commons-borderRadius-L) 0 0 var(--commons-borderRadius-L);
 	}
@@ -161,7 +164,6 @@
 }
 
 @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/calloutAccordion/mods.scss

@@ -20,10 +20,6 @@
 		@include icon.S;
 	}
 
-	.calloutAccordion-details {
-		margin-inline-start: 2.75rem;
-	}
-
 	.calloutFeedbackList {
 		@include calloutFeedbackList.S;
 	}

package/src/components/calloutPopover/component.scss

@@ -19,7 +19,7 @@
 	}
 
 	&:focus-visible {
-		@include a11y.focusVisible();
+		@include a11y.focusVisible;
 	}
 
 	@at-root ($atRoot) {
@@ -47,6 +47,7 @@
 
 		.calloutPopover-overlay-head-icon {
 			@include icon.M;
+
 			color: var(--palettes-700, var(--palettes-neutral-700));
 		}
 

package/src/components/card/mods.scss

@@ -16,7 +16,7 @@
 	}
 
 	&:focus-visible {
-		@include a11y.focusVisible();
+		@include a11y.focusVisible;
 	}
 }
 

package/src/components/checkbox/mods.scss

@@ -6,6 +6,7 @@
 
 @mixin S {
 	--components-checkbox-input-size: 1rem;
+
 	line-height: var(--sizes-S-lineHeight);
 
 	.checkbox-label {

package/src/components/checkboxField/component.scss

@@ -6,7 +6,6 @@
 	position: relative;
 	inline-size: fit-content;
 	block-size: fit-content;
-
 	display: grid;
 	grid-template-areas: 'checkbox';
 	grid-template-columns: var(--component-checkboxField-size);
@@ -56,6 +55,8 @@
 				font-weight: 400;
 				font-size: var(--component-checkboxField-icon-fontSize);
 				direction: ltr;
+
+				// stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- This font is for icons and should not have fallback.
 				font-family: 'Lucca icons';
 				font-feature-settings: 'liga';
 				font-style: normal;

package/src/components/checkboxField/states.scss

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

package/src/components/clear/component.scss

@@ -46,7 +46,7 @@
 		--components-clear-background: var(--palettes-neutral-800);
 	}
 
-	//to prevent breaking change. lucca-icon is no longer needed.
+	// to prevent breaking change. lucca-icon is no longer needed.
 	.lucca-icon {
 		display: none;
 	}

package/src/components/comment/component.scss

@@ -78,6 +78,8 @@
 		.comment-content-text {
 			margin-block-end: 0;
 			overflow-wrap: break-word;
+			font-size: var(--components-comment-text-fontSize);
+			line-height: var(--components-comment-text-lineHeight);
 		}
 
 		// .comment-content-textContainer is deprecated
@@ -93,11 +95,6 @@
 				margin: 0;
 			}
 		}
-
-		.comment-content-text {
-			font-size: var(--components-comment-text-fontSize);
-			line-height: var(--components-comment-text-lineHeight);
-		}
 	}
 }
 

package/src/components/dataTable/mods.scss

@@ -87,13 +87,6 @@
 	text-align: end;
 	white-space: nowrap;
 
-	&:is(.dataTable-head-row-cell) {
-		.button {
-			position: relative;
-			inset-block-end: var(--pr-t-spacings-50);
-		}
-	}
-
 	.button {
 		@include button.S;
 		@include button.onlyIcon;

package/src/components/dataTableSticked/mods.scss

@@ -110,6 +110,18 @@
 
 	:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
 		&.mod-stickyColumn {
+			position: sticky;
+
+			&:first-child {
+				inset-inline-start: 0;
+			}
+
+			&:last-child {
+				inset-inline-end: 0;
+
+				--components-dataTable-cell-shadow: 0 1px inset var(--commons-border-200), 1px 0 var(--palettes-neutral-0); // white shadow is for Chrome
+			}
+
 			&:has(~ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell):not(.mod-stickyColumn)) {
 				transform: translateX(-1px);
 
@@ -139,21 +151,6 @@
 			}
 		}
 	}
-
-	:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
-		&.mod-stickyColumn {
-			position: sticky;
-
-			&:first-child {
-				inset-inline-start: 0;
-			}
-
-			&:last-child {
-				inset-inline-end: 0;
-				--components-dataTable-cell-shadow: 0 1px inset var(--commons-border-200), 1px 0 var(--palettes-neutral-0); // white shadow is for Chrome
-			}
-		}
-	}
 }
 
 @mixin stickyColumnBorder {

package/src/components/dateRangeField/vars.scss

@@ -6,7 +6,7 @@
 
 	--components-dateRangeField-maxWidthDayS: 16.5rem;
 	--components-dateRangeField-maxWidthMonthS: 13.5rem; // 12.75rem;
-	--components-dateRangeField-maxWidthYearS: 10.25rem; //9.75rem;
+	--components-dateRangeField-maxWidthYearS: 10.25rem; // 9.75rem;
 
 	--components-dateRangeField-content-inlineStart: calc(var(--pr-t-spacings-100) + var(--pr-t-spacings-25));
 	--components-dateRangeField-content-width: calc(50% + var(--pr-t-spacings-300) + var(--pr-t-spacings-50));

package/src/components/dialog/mods.scss

@@ -41,7 +41,6 @@
 	--components-dialog-maxWidth: none;
 	--components-dialog-inset: auto 0 0 0;
 	--components-dialog-borderRadius: var(--commons-borderRadius-L) var(--commons-borderRadius-L) 0 0;
-
 	--components-dialog-width: 100%;
 	--components-dialog-height: fit-content;
 

package/src/components/divider/component.scss

@@ -38,6 +38,8 @@
 
 		.lucca-icon {
 			color: var(--palettes-neutral-600);
+			position: relative;
+			inset-block-end: var(--components-divider-iconBottom);
 		}
 
 		&:not(.mod-vertical) {
@@ -47,11 +49,6 @@
 				min-inline-size: var(--components-divider-minSize);
 			}
 		}
-
-		.lucca-icon {
-			position: relative;
-			inset-block-end: var(--components-divider-iconBottom);
-		}
 	}
 
 	.button {

package/src/components/dropdown/component.scss

@@ -56,6 +56,7 @@
 
 			.lucca-icon {
 				@include icon.S;
+
 				margin-block-start: var(--pr-t-spacings-25);
 			}
 
@@ -74,7 +75,7 @@
 			}
 
 			&:focus-visible {
-				@include a11y.focusVisible();
+				@include a11y.focusVisible;
 			}
 		}
 	}

package/src/components/emptyState/component.scss

@@ -48,6 +48,7 @@
 			@include title.h3;
 
 			margin-block-end: var(--pr-t-spacings-50);
+
 			@if config.$deprecatedSpacings {
 				margin-block-end: 0;
 			}

package/src/components/errorPage/component.scss

@@ -30,6 +30,7 @@
 	.errorPage-section-info-title {
 		@include title.component;
 		@include title.XXXL;
+
 		margin-block-end: var(--pr-t-spacings-50);
 	}
 
@@ -60,6 +61,7 @@
 		order: 1;
 		padding: 0;
 	}
+
 	.errorPage-section-image {
 		margin-block-start: var(--pr-t-spacings-400);
 		order: 0;

package/src/components/fancyBox/component.scss

@@ -4,6 +4,8 @@
 	overflow: hidden;
 	padding-inline: var(--pr-t-spacings-200);
 	display: block;
+	position: relative;
+	z-index: 0;
 
 	@at-root ($atRoot) {
 		.fancyBox-content {