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

package/src/components/notchBox/mods.scss

@@ -6,11 +6,13 @@
 		--component-notchbox-notch-radius-outer: var(--component-notchbox-notch-radius);
 		--component-notchbox-notch-padding: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding));
 		--component-notchbox-notch-percent-offset: var(--component-notchbox-notch-percent, 0) * var(--component-notchbox-notch-radius-inner);
-		--component-notchbox-notch-percent-offset2: (1 - var(--component-notchbox-notch-percent, 0)) *
-			var(--component-notchbox-notch-radius-inner);
-		--component-notchbox-badge-anchor: calc(
-			var(--component-notchbox-badge-offset) * -1 + (var(--component-notchbox-notch-height) - var(--component-notchbox-badge-height)) / 2
-		);
+		--component-notchbox-notch-percent-offset2:
+			(1 - var(--component-notchbox-notch-percent, 0))
+			* var(--component-notchbox-notch-radius-inner);
+		--component-notchbox-badge-anchor:
+			calc(
+				var(--component-notchbox-badge-offset) * -1 + (var(--component-notchbox-notch-height) - var(--component-notchbox-badge-height)) / 2
+			);
 	}
 }
 
@@ -23,31 +25,43 @@
 		--component-notchbox-notch-gradient1-ref2: calc(100% - var(--component-notchbox-notch-height));
 
 		--component-notchbox-notch-gradient2-anchor: left;
-		--component-notchbox-notch-gradient2-ref1: calc(
-			var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width)) /
-				2 - var(--component-notchbox-notch-radius-outer) - var(--smooth) * 2
-		);
+		--component-notchbox-notch-gradient2-ref1:
+			calc(
+				var(--component-notchbox-notch-position)
+				- (var(--component-notchbox-notch-width)) / 2
+				- var(--component-notchbox-notch-radius-outer)
+				- var(--smooth) * 2
+			);
 		--component-notchbox-notch-gradient2-ref2: 100%;
 
 		--component-notchbox-notch-gradient3-anchor: right;
-		--component-notchbox-notch-gradient3-ref1: calc(
-			100% -
-				(
-					var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
-						var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
+		--component-notchbox-notch-gradient3-ref1:
+			calc(
+				100%
+				- (
+					var(--component-notchbox-notch-position)
+					+ var(--component-notchbox-notch-width) / 2
+					+ var(--component-notchbox-notch-radius-outer)
+					+ var(--smooth) * 2
 				)
-		);
+			);
 		--component-notchbox-notch-gradient3-ref2: 100%;
 
-		--component-notchbox-notch-gradient4-x: calc(
-			var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
-				2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
-		);
-
-		--component-notchbox-notch-gradient5-x: calc(
-			var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
-				var(--smooth)
-		);
+		--component-notchbox-notch-gradient4-x:
+			calc(
+				var(--component-notchbox-notch-position)
+				- var(--component-notchbox-notch-width) / 2
+				- var(--component-notchbox-notch-radius-outer)
+				- var(--smooth)
+			);
+
+		--component-notchbox-notch-gradient5-x:
+			calc(
+				var(--component-notchbox-notch-position)
+				+ var(--component-notchbox-notch-width) / 2
+				+ var(--component-notchbox-notch-radius-outer)
+				+ var(--smooth)
+			);
 		--component-notchbox-notch-gradient5-y: var(--component-notchbox-notch-gradient4-y);
 
 		--component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
@@ -55,20 +69,27 @@
 		--component-notchbox-notch-gradient6-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
 
 		--component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
-		--component-notchbox-notch-gradient7-ref1: calc(
-			100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
-		);
+		--component-notchbox-notch-gradient7-ref1:
+			calc(
+				100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
+			);
 		--component-notchbox-notch-gradient7-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
 
-		--component-notchbox-notch-gradient8-x: calc(
-			var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
-				var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
-		);
-
-		--component-notchbox-notch-gradient9-x: calc(
-			var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
-				var(--smooth) * 2
-		);
+		--component-notchbox-notch-gradient8-x:
+			calc(
+				var(--component-notchbox-notch-position)
+				- var(--component-notchbox-notch-width) / 2
+				+ var(--component-notchbox-notch-percent-offset)
+				- var(--smooth) * 2
+			);
+
+		--component-notchbox-notch-gradient9-x:
+			calc(
+				var(--component-notchbox-notch-position)
+				+ var(--component-notchbox-notch-width) / 2
+				- var(--component-notchbox-notch-percent-offset2)
+				+ var(--smooth) * 2
+			);
 		--component-notchbox-notch-gradient9-y: var(--component-notchbox-notch-gradient8-y);
 
 		// badge
@@ -88,30 +109,40 @@
 
 		--component-notchbox-notch-gradient2-anchor: top;
 		--component-notchbox-notch-gradient2-ref1: 100%;
-		--component-notchbox-notch-gradient2-ref2: calc(
-			var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer))
-		);
+		--component-notchbox-notch-gradient2-ref2:
+			calc(
+				var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer))
+			);
 
 		--component-notchbox-notch-gradient3-anchor: bottom;
 		--component-notchbox-notch-gradient3-ref1: 100%;
-		--component-notchbox-notch-gradient3-ref2: calc(
-			100% -
-				(
-					var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
-						var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
+		--component-notchbox-notch-gradient3-ref2:
+			calc(
+				100%
+				- (
+					var(--component-notchbox-notch-position)
+					+ var(--component-notchbox-notch-width) / 2
+					+ var(--component-notchbox-notch-radius-outer)
+					+ var(--smooth) * 2
 				)
-		);
+			);
 
-		--component-notchbox-notch-gradient4-y: calc(
-			var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
-				2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
-		);
+		--component-notchbox-notch-gradient4-y:
+			calc(
+				var(--component-notchbox-notch-position)
+				- var(--component-notchbox-notch-width) / 2
+				- var(--component-notchbox-notch-radius-outer)
+				- var(--smooth)
+			);
 
 		--component-notchbox-notch-gradient5-x: var(--component-notchbox-notch-gradient4-x);
-		--component-notchbox-notch-gradient5-y: calc(
-			var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
-				var(--smooth)
-		);
+		--component-notchbox-notch-gradient5-y:
+			calc(
+				var(--component-notchbox-notch-position)
+				+ var(--component-notchbox-notch-width) / 2
+				+ var(--component-notchbox-notch-radius-outer)
+				+ var(--smooth)
+			);
 
 		--component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
 		--component-notchbox-notch-gradient6-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
@@ -119,20 +150,27 @@
 
 		--component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
 		--component-notchbox-notch-gradient7-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
-		--component-notchbox-notch-gradient7-ref2: calc(
-			100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
-		);
-
-		--component-notchbox-notch-gradient8-y: calc(
-			var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
-				var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
-		);
+		--component-notchbox-notch-gradient7-ref2:
+			calc(
+				100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
+			);
+
+		--component-notchbox-notch-gradient8-y:
+			calc(
+				var(--component-notchbox-notch-position)
+				- var(--component-notchbox-notch-width) / 2
+				+ var(--component-notchbox-notch-percent-offset)
+				- var(--smooth) * 2
+			);
 
 		--component-notchbox-notch-gradient9-x: var(--component-notchbox-notch-gradient8-x);
-		--component-notchbox-notch-gradient9-y: calc(
-			var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
-				var(--smooth) * 2
-		);
+		--component-notchbox-notch-gradient9-y:
+			calc(
+				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);
@@ -148,9 +186,10 @@
 	--component-notchbox-notch-gradient4-y: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
 
 	--component-notchbox-notch-gradient8-anchor: 100% 0%;
-	--component-notchbox-notch-gradient8-y: calc(
-		var(--component-notchbox-notch-height) - var(--component-notchbox-notch-radius-inner) + var(--smooth)
-	);
+	--component-notchbox-notch-gradient8-y:
+		calc(
+			var(--component-notchbox-notch-height) - var(--component-notchbox-notch-radius-inner) + var(--smooth)
+		);
 	--component-notchbox-notch-gradient9-anchor: 0 0;
 	--component-notchbox-badge-top: var(--component-notchbox-badge-anchor);
 	--component-notchbox-box-padding-top: var(--component-notchbox-notch-padding);
@@ -163,9 +202,10 @@
 	--component-notchbox-notch-gradient4-y: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
 
 	--component-notchbox-notch-gradient8-anchor: 100% 100%;
-	--component-notchbox-notch-gradient8-y: calc(
-		100% - var(--component-notchbox-notch-height) + var(--component-notchbox-notch-radius-inner) - var(--smooth)
-	);
+	--component-notchbox-notch-gradient8-y:
+		calc(
+			100% - var(--component-notchbox-notch-height) + var(--component-notchbox-notch-radius-inner) - var(--smooth)
+		);
 	--component-notchbox-notch-gradient9-anchor: 0 100%;
 	--component-notchbox-badge-bottom: var(--component-notchbox-badge-anchor);
 	--component-notchbox-box-padding-bottom: var(--component-notchbox-notch-padding);
@@ -177,9 +217,10 @@
 	--component-notchbox-notch-gradient1-anchor: right;
 	--component-notchbox-notch-gradient4-x: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
 	--component-notchbox-notch-gradient8-anchor: 0 100%;
-	--component-notchbox-notch-gradient8-x: calc(
-		var(--component-notchbox-notch-height) - var(--component-notchbox-notch-radius-inner) + var(--smooth)
-	);
+	--component-notchbox-notch-gradient8-x:
+		calc(
+			var(--component-notchbox-notch-height) - var(--component-notchbox-notch-radius-inner) + var(--smooth)
+		);
 	--component-notchbox-notch-gradient9-anchor: 0 0;
 	--component-notchbox-badge-left: var(--component-notchbox-badge-anchor);
 	--component-notchbox-box-padding-left: var(--component-notchbox-notch-padding);
@@ -191,9 +232,10 @@
 	--component-notchbox-notch-gradient1-anchor: left;
 	--component-notchbox-notch-gradient4-x: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
 	--component-notchbox-notch-gradient8-anchor: 100% 100%;
-	--component-notchbox-notch-gradient8-x: calc(
-		100% - var(--component-notchbox-notch-height) + var(--component-notchbox-notch-radius-inner) - var(--smooth)
-	);
+	--component-notchbox-notch-gradient8-x:
+		calc(
+			100% - var(--component-notchbox-notch-height) + var(--component-notchbox-notch-radius-inner) - var(--smooth)
+		);
 	--component-notchbox-notch-gradient9-anchor: 100% 0;
 
 	--component-notchbox-badge-right: var(--component-notchbox-badge-anchor);

package/src/components/numericBadge/component.scss

@@ -22,7 +22,6 @@
 
 	&:empty {
 		&::before {
-			// stylelint-disable-next-line no-irregular-whitespace -- Don’t wrap content because of a space.
 			content: ' ' / '';
 		}
 	}

package/src/components/numericBadge/mods.scss

@@ -1,5 +1,15 @@
 @use '@lucca-front/scss/src/commons/config';
 
+@mixin M {
+	--components-numericBadge-size: 1.5rem;
+	--components-numericBadge-borderRadius: var(--pr-t-border-radius-default);
+	--components-numericBadge-font: var(--pr-t-font-body-S);
+
+	// Deprecated
+	--components-numericBadge-fontSize: var(--pr-t-font-body-S-fontSize);
+	--components-numericBadge-lineHeight: var(--pr-t-font-body-S-lineHeight);
+}
+
 @mixin S {
 	--components-numericBadge-size: 1.25rem;
 	--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);

package/src/components/pageHeader/mods.scss

@@ -1,11 +1,11 @@
-@use "@lucca-front/scss/src/components/button/exports" as button;
+@use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin horizontalNavigation {
 	padding-block-end: 0;
 
-	// .menu is deprecated
-	.horizontalNavigation,
-	.menu {
+	// stylelint-disable-next-line selector-disallowed-list -- .menu is deprecated
+	.menu,
+	.horizontalNavigation {
 		margin-block-start: var(--pr-t-spacings-50);
 	}
 }

package/src/components/pagination/mods.scss

@@ -1,4 +1,4 @@
 @mixin compact {
-  padding: 0;
-  justify-content: start;
+	padding: 0;
+	justify-content: start;
 }

package/src/components/presentation/index.scss

@@ -7,6 +7,5 @@
 	}
 
 	@layer mods {
-
 	}
 }

package/src/components/progress/vars.scss

@@ -6,10 +6,11 @@
 	--components-progress-height: 0.25rem;
 	--components-progress-background: var(--palettes-neutral-100);
 	--components-progress-bar-background: var(--palettes-product-700);
-	--components-progress-bar-gradient: linear-gradient(
-		to right,
-		color.transparentize(var(--palettes-neutral-0), 0.8) 0%,
-		color.transparentize(var(--palettes-neutral-0), 0.5) 100%
-	);
+	--components-progress-bar-gradient:
+		linear-gradient(
+			to right,
+			color.transparentize(var(--palettes-neutral-0), 0.8) 0%,
+			color.transparentize(var(--palettes-neutral-0), 0.5) 100%
+		);
 	--components-progress-duration: 1.5s;
 }

package/src/components/readMore/component.scss

@@ -14,11 +14,12 @@
 			flex-direction: column;
 			z-index: 1;
 			line-height: var(--pr-t-font-body-M-lineHeight);
-			background-image: linear-gradient(
-				to right,
-				transparent,
-				var(--components-readMore-link-backgroudColor) calc(var(--components-readMore-link-paddingInlineStart) - var(--pr-t-spacings-100))
-			);
+			background-image:
+				linear-gradient(
+					to right,
+					transparent,
+					var(--components-readMore-link-backgroudColor) calc(var(--components-readMore-link-paddingInlineStart) - var(--pr-t-spacings-100))
+				);
 			padding-inline-start: var(--components-readMore-link-paddingInlineStart);
 			font-weight: var(--pr-t-font-fontWeight-semibold);
 			text-decoration: none;

package/src/components/resourceCard/mods.scss

@@ -12,9 +12,10 @@
 	--components-resourceCard-layout-content-paddingBlockStart: var(--pr-t-spacings-50);
 	--components-resourceCard-layout-header-alignItems: start;
 	--components-resourceCard-layout-header-flexDirection: column;
-	--components-resourceCard-layout-gridTemplate: "before  header  after"   auto
-																								 "content content content" auto
-																								 /auto    1fr     auto;
+	--components-resourceCard-layout-gridTemplate:
+		'before  header  after'   auto
+		'content content content' auto
+		/auto    1fr     auto;
 }
 
 @mixin wrapped {
@@ -28,8 +29,8 @@
 
 	.bubbleIllustration {
 		@include bubbleIllustration.S;
-  }
-  
+	}
+
 	.bubbleIcon {
 		@include bubbleIcon.S;
 	}
@@ -42,8 +43,9 @@
 
 @mixin hasNoContentHasIllustrationNoGrid {
 	--components-resourceCard-layout-alignItems: center;
-	--components-resourceCard-layout-gridTemplate: "before  header  after"  1fr
-																								 /auto    1fr     auto;
+	--components-resourceCard-layout-gridTemplate:
+		'before  header  after'  1fr
+		/auto    1fr     auto;
 }
 
 @mixin hasContentNoGridHasIllustration {
@@ -64,23 +66,23 @@
 
 @mixin hasAction {
 	.resourceCard-layout-after .button {
-			@include button.S;
-			@include button.ghost;
+		@include button.S;
+		@include button.ghost;
 
-			&:has(> lu-icon:only-child, > .lucca-icon:only-child, > .lucca-icon:first-child + .pr-u-mask:last-child) {
-				@include button.onlyIcon;
-				@include button.onlyIconS;
-			}
+		&:has(> lu-icon:only-child, > .lucca-icon:only-child, > .lucca-icon:first-child + .pr-u-mask:last-child) {
+			@include button.onlyIcon;
+			@include button.onlyIconS;
 		}
+	}
 }
 
 @mixin hasDrag {
 	.resourceCard-layout-before-button.button {
-			@include button.S;
-			@include button.ghost;
-			@include button.onlyIcon;
-			@include button.onlyIconS;
-		}
+		@include button.S;
+		@include button.ghost;
+		@include button.onlyIcon;
+		@include button.onlyIconS;
+	}
 }
 
 @mixin hasNumericBadge {

package/src/components/resourceCard/states.scss

@@ -21,11 +21,10 @@
 	--components-resourceCard-layout-header-title-action-color: var(--palettes-neutral-500);
 	--components-resourceCard-before-boxShadow: 0 0 0 1px var(--palettes-neutral-50);
 
-
 	.bubbleIllustration {
 		--palettes-brand-600: var(--pr-t-color-input-icon-disabled);
-  }
-  
+	}
+
 	.bubbleIcon {
 		--components-bubbleIcon-color: var(--pr-t-color-input-icon-disabled);
 		--components-bubbleIcon-bubble-path-fill: var(--pr-t-color-input-background-disabled);

package/src/components/resourceCard/vars.scss

@@ -22,9 +22,10 @@
 	--components-resourceCard-layout-header-paddingBlockStart: var(--pr-t-spacings-50);
 	--components-resourceCard-layout-header-paddingBlockEnd: var(--pr-t-spacings-50);
 
-	--components-resourceCard-layout-gridTemplate: "before header  after" auto
-																								 "before content after" 1fr
-																								/ auto   1fr     auto;
+	--components-resourceCard-layout-gridTemplate:
+		'before header  after' auto
+		'before content after' 1fr
+		/ auto   1fr     auto;
 }
 
 @mixin varsWrapper {

package/src/components/richText/index.scss

@@ -1,6 +1,5 @@
 @use 'exports' as *;
 
-
 .richTextField {
 	@layer components {
 		@include vars;

package/src/components/scrollBox/component.scss

@@ -48,7 +48,8 @@
 		margin-inline-start: calc(var(--components-scrollBox-paddingInline) * -1);
 		margin-inline-end: calc(var(--components-scrollBox-paddingInline) - var(--components-scrollBox-shadowSize) - var(--components-scrollBox-gap));
 		background-position: 0% 50%;
-		background-image: radial-gradient(
+		background-image:
+			radial-gradient(
 				farthest-side at 0% 50%,
 				color.transparentize(var(--components-scrollBox-shadowColor), 0.24),
 				color.transparentize(var(--palettes-neutral-900), 0)
@@ -70,7 +71,8 @@
 		margin-inline-start: calc(var(--components-scrollBox-paddingInline) - var(--components-scrollBox-shadowSize) - var(--components-scrollBox-gap));
 		margin-inline-end: calc(var(--components-scrollBox-paddingInline) * -1);
 		background-position: 100% 50%;
-		background-image: radial-gradient(
+		background-image:
+			radial-gradient(
 				farthest-side at 100% 50%,
 				color.transparentize(var(--components-scrollBox-shadowColor), 0.24),
 				color.transparentize(var(--palettes-neutral-900), 0)

package/src/components/segmentedControl/component.scss

@@ -84,14 +84,16 @@
 			}
 
 			&:hover {
-				--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-400),
+				--components-segmentedControl-shadow:
+					0 0 0 var(--commons-divider-width) var(--palettes-product-400),
 					var(--pr-t-elevation-shadow-raised);
 				--components-segmentedControl-zIndex: 1;
 			}
 
 			&:active {
 				--components-segmentedControl-background: var(--palettes-neutral-0);
-				--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500),
+				--components-segmentedControl-shadow:
+					0 0 0 var(--commons-divider-width) var(--palettes-product-500),
 					var(--pr-t-elevation-shadow-raised);
 			}
 		}

package/src/components/segmentedControl/index.scss

@@ -42,6 +42,7 @@
 	// .viewTabs_panel is deprecated
 	.segmentedControl_panel,
 	.viewTabs_panel {
+		// .active is deprecated
 		&:not(.is-active, .active) {
 			@include panelInactive;
 		}

package/src/components/segmentedControl/states.scss

@@ -8,8 +8,6 @@
 	--components-segmentedControl-backgroundContent: none;
 	--components-segmentedControl-zIndex: 1;
 
-
-
 	.numericBadge {
 		@include numericBadge.inherit;
 

package/src/components/skeleton/mods.scss

@@ -42,19 +42,26 @@
 
 @mixin alignRight {
 	&:not(.mod-square, .mod-circle) {
-		clip-path: inset(
-			calc(var(--components-skeleton-text-offset) + 1px) 0 calc(var(--components-skeleton-text-offset) - 1px)
-				calc(100% - var(--components-skeleton-text-width, 100%)) var(--components-skeleton-text-clipPathRound)
-		);
+		clip-path:
+			inset(
+				calc(var(--components-skeleton-text-offset) + 1px)
+				0
+				calc(var(--components-skeleton-text-offset) - 1px)
+				calc(100% - var(--components-skeleton-text-width, 100%))
+				var(--components-skeleton-text-clipPathRound)
+			);
 	}
 }
 
 @mixin alignCenter {
 	&:not(.mod-square, .mod-circle) {
-		clip-path: inset(
-			calc(var(--components-skeleton-text-offset) + 1px) calc(50% - (var(--components-skeleton-text-width, 100%) / 2))
-				calc(var(--components-skeleton-text-offset) - 1px) calc(50% - (var(--components-skeleton-text-width, 100%) / 2))
+		clip-path:
+			inset(
+				calc(var(--components-skeleton-text-offset) + 1px)
+				calc(50% - (var(--components-skeleton-text-width, 100%) / 2))
+				calc(var(--components-skeleton-text-offset) - 1px)
+				calc(50% - (var(--components-skeleton-text-width, 100%) / 2))
 				var(--components-skeleton-text-clipPathRound)
-		);
+			);
 	}
 }

package/src/components/skeleton/states.scss

@@ -43,14 +43,10 @@
 			@if ($title == '5') {
 				line-height: 1.25rem;
 				min-block-size: 1.25rem;
-			}
-
-			@else if ($title == '6') {
+			} @else if ($title == '6') {
 				line-height: 1rem;
 				min-block-size: 1rem;
-			}
-
-			@else {
+			} @else {
 				line-height: var(--pr-t-font-heading-#{$title}-lineHeight);
 				min-block-size: var(--pr-t-font-heading-#{$title}-lineHeight);
 			}
@@ -76,14 +72,10 @@
 				@if ($title == '5') {
 					line-height: 1.25rem;
 					min-block-size: 1.25rem;
-				}
-
-				@else if ($title == '6') {
+				} @else if ($title == '6') {
 					line-height: 1rem;
 					min-block-size: 1rem;
-				}
-
-				@else {
+				} @else {
 					line-height: var(--pr-t-font-heading-#{$title}-lineHeight);
 					min-block-size: var(--pr-t-font-heading-#{$title}-lineHeight);
 				}
@@ -109,12 +101,13 @@
 
 	.skeleton-item {
 		animation: skeletonBackground 1.5s infinite linear;
-		background-image: linear-gradient(
-			90deg,
-			var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)),
-			var(--components-skeleton-gradient-step-two, var(--palettes-neutral-200)),
-			var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50))
-		);
+		background-image:
+			linear-gradient(
+				90deg,
+				var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)),
+				var(--components-skeleton-gradient-step-two, var(--palettes-neutral-200)),
+				var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50))
+			);
 		background-size: 150% 100%;
 		background-repeat: repeat-x;
 		display: block;
@@ -124,10 +117,11 @@
 			@include skeletonTextSizing('XS', 'S', 'L', 'XL', 'XXL');
 			@include skeletonTitleSizing('1', '2', '3', '4', '5', '6');
 
-			clip-path: inset(
-				calc(var(--components-skeleton-text-offset) + 1px) calc(100% - var(--components-skeleton-text-width, 100%))
+			clip-path:
+				inset(
+					calc(var(--components-skeleton-text-offset) + 1px) calc(100% - var(--components-skeleton-text-width, 100%))
 					calc(var(--components-skeleton-text-offset) - 1px) 0 var(--components-skeleton-text-clipPathRound)
-			);
+				);
 			block-size: var(--pr-t-font-body-M-lineHeight);
 			inline-size: 100%;
 		}

package/src/components/softwareIcon/component.scss

@@ -1,4 +1,3 @@
-
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {