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

package/src/components/horizontalNavigation/component.scss

@@ -20,7 +20,7 @@
 		inset: auto 0 0;
 	}
 
-	// .label is deprecated
+	// stylelint-disable-next-line selector-disallowed-list -- .label is deprecated
 	.label {
 		margin-inline-end: 0;
 		background-color: var(--palettes-neutral-100);
@@ -28,16 +28,16 @@
 	}
 
 	@at-root ($atRoot) {
-		// .menu-containerOptional is deprecated
-		.horizontalNavigation-containerOptional,
-		.menu-containerOptional {
+		// stylelint-disable-next-line selector-disallowed-list -- .menu-containerOptional is deprecated
+		.menu-containerOptional,
+		.horizontalNavigation-containerOptional {
 			max-inline-size: var(--commons-container-maxWidth);
 			padding: var(--commons-container-padding);
 		}
 
-		// .menu-list is deprecated
-		.horizontalNavigation-list,
-		.menu-list {
+		// stylelint-disable-next-line selector-disallowed-list -- .menu-list is deprecated
+		.menu-list,
+		.horizontalNavigation-list {
 			@include reset.list;
 
 			align-items: var(--components-horizontalNavigation-listAlign);
@@ -52,11 +52,9 @@
 			}
 		}
 
-		// .menu-link is deprecated
-		// .menu-list-item-action is deprecated
-		.horizontalNavigation-list-item-action,
-		.menu-list-item-action,
-		.menu-link {
+		.menu-link, // stylelint-disable-line selector-disallowed-list -- .menu-list is deprecated
+		.menu-list-item-action, // stylelint-disable-line selector-disallowed-list -- .menu-link-item-action is deprecated
+		.horizontalNavigation-list-item-action {
 			@include reset.button;
 
 			font: var(--components-horizontalNavigation-listItemActionFont);
@@ -112,7 +110,7 @@
 						color: var(--palettes-neutral-900);
 					}
 
-					// .label is deprecated
+					// stylelint-disable-next-line selector-disallowed-list -- .label is deprecated
 					.label {
 						background-color: var(--palettes-100, var(--palettes-product-100));
 						color: var(--palettes-700, var(--palettes-product-700));
@@ -129,9 +127,9 @@
 			}
 		}
 
-		// .menu-link-placeholder is deprecated
-		.horizontalNavigation-link-placeholder,
-		.menu-link-placeholder {
+		// stylelint-disable-next-line selector-disallowed-list -- .menu-link-placeholder is deprecated
+		.menu-link-placeholder,
+		.horizontalNavigation-link-placeholder {
 			&::after {
 				content: attr(data-content-after);
 				display: block;

package/src/components/horizontalNavigation/index.scss

@@ -1,8 +1,8 @@
 @use 'exports' as *;
 
-// .menu is deprecated
-.horizontalNavigation,
-.menu {
+// stylelint-disable-next-line selector-disallowed-list -- .menu is deprecated
+.menu,
+.horizontalNavigation {
 	@layer components {
 		@include vars;
 		@include component;
@@ -24,9 +24,9 @@
 		&.mod-vertical {
 			@include vertical;
 
-			// .menu-list-item-action is deprecated
-			.horizontalNavigation-list-item-action,
-			.menu-list-item-action {
+			// stylelint-disable-next-line selector-disallowed-list -- .menu-list-item-action is deprecated
+			.menu-list-item-action,
+			.horizontalNavigation-list-item-action {
 				&[aria-current='page'],
 				&.is-active {
 					@include activeVertical;
@@ -40,24 +40,20 @@
 	}
 }
 
-// .menu-link is deprecated
-// .menu-list-item-action is deprecated
-.horizontalNavigation-list-item-action,
-.menu-link,
-.menu-list-item-action {
+.menu-link, // stylelint-disable-line selector-disallowed-list -- .menu-link is deprecated
+.menu-list-item-action, // stylelint-disable-line selector-disallowed-list -- .menu-list-item-action is deprecated
+.horizontalNavigation-list-item-action {
 	@layer mods {
 		// .active is deprecated
+		&.active,
 		&[aria-current='page'],
-		&.is-active,
-		&.active {
+		&.is-active {
 			@include active;
 		}
 
-		// .disabled is deprecated
-		// [disabled] is deprecated
-		&.is-disabled,
-		&.disabled,
-		&[disabled] {
+		&.disabled, // .disabled is deprecated
+		&[disabled], // [disabled] is deprecated
+		&.is-disabled {
 			@include disabled;
 		}
 	}

package/src/components/horizontalNavigation/mods.scss

@@ -5,11 +5,9 @@
 }
 
 @mixin S {
-	// .menu-link is deprecated
-	// .menu-list-item-action is deprecated
-	.horizontalNavigation-list-item-action,
-	.menu-list-item-action,
-	.menu-link {
+	.menu-list-item-action, // stylelint-disable-line selector-disallowed-list -- .menu-list-item-action is deprecated
+	.menu-link, // stylelint-disable-line selector-disallowed-list -- .menu-link is deprecated
+	.horizontalNavigation-list-item-action {
 		--components-horizontalNavigation-listItemActionFont: var(--pr-t-font-body-S);
 		--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-150) 0;
 
@@ -19,12 +17,12 @@
 		}
 	}
 
-	// .menu-link is deprecated
+	// stylelint-disable-next-line selector-disallowed-list -- .menu-link is deprecated
 	.menu-link {
 		margin-inline-end: var(--pr-t-spacings-300);
 	}
 
-	// .label is deprecated
+	// stylelint-disable-next-line selector-disallowed-list -- .label is deprecated
 	.label {
 		block-size: var(--pr-t-font-body-S-lineHeight);
 		min-inline-size: var(--pr-t-font-body-S-lineHeight);
@@ -46,27 +44,29 @@
 @mixin vertical {
 	@include noBorder;
 
-	// .menu-list is deprecated
-	.horizontalNavigation-list,
-	.menu-list {
+	// stylelint-disable-next-line selector-disallowed-list -- .menu-list is deprecated
+	.menu-list,
+	.horizontalNavigation-list {
 		--components-horizontalNavigation-listDirection: column;
 		--components-horizontalNavigation-listGap: 0;
 		--components-horizontalNavigation-listAlign: stretch;
 	}
 
-	// .menu-list-item-action is deprecated
-	.horizontalNavigation-list-item-action,
-	.menu-list-item-action {
+	// stylelint-disable-next-line selector-disallowed-list -- .menu-list-item-action is deprecated
+	.menu-list-item-action,
+	.horizontalNavigation-list-item-action {
 		--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-200);
 		--components-horizontalNavigation-listItemActionAlign: left;
 
 		&::before {
-			inset-block: calc(
-				var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25)
-			);
-			inset-inline: calc(
-				var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-150) + var(--pr-t-spacings-25)
-			);
+			inset-block:
+				calc(
+					var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25)
+				);
+			inset-inline:
+				calc(
+					var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-150) + var(--pr-t-spacings-25)
+				);
 		}
 
 		&::after {
@@ -89,18 +89,20 @@
 }
 
 @mixin verticalS {
-	// .menu-list-item-action is deprecated
-	.horizontalNavigation-list-item-action,
-	.menu-list-item-action {
+	// stylelint-disable-next-line selector-disallowed-list -- .menu-list-item-action is deprecated
+	.menu-list-item-action,
+	.horizontalNavigation-list-item-action {
 		--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-150);
 
 		&::before {
-			inset-block: calc(
-				var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25)
-			);
-			inset-inline: calc(
-				var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-100) + var(--pr-t-spacings-25)
-			);
+			inset-block:
+				calc(
+					var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25)
+				);
+			inset-inline:
+				calc(
+					var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-100) + var(--pr-t-spacings-25)
+				);
 		}
 	}
 }

package/src/components/horizontalNavigation/states.scss

@@ -3,7 +3,7 @@
 @mixin active {
 	--components-horizontalNavigation-listItemActionColor: var(--palettes-700, var(--palettes-product-700));
 
-	// .label is deprecated
+	// stylelint-disable-next-line selector-disallowed-list -- .label is deprecated
 	.label {
 		background-color: var(--palettes-100, var(--palettes-product-100));
 		color: var(--palettes-700, var(--palettes-product-700));
@@ -25,9 +25,9 @@
 }
 
 @mixin disabled {
-	// .label is deprecated
-	&,
-	.label {
+	// stylelint-disable-next-line selector-disallowed-list -- .label is deprecated
+	.label,
+	& {
 		color: var(--palettes-neutral-500); // disabled token candidate
 		pointer-events: none;
 	}

package/src/components/horizontalNavigation/vars.scss

@@ -3,7 +3,8 @@
 	--components-horizontalNavigation-listPadding: 0;
 	--components-horizontalNavigation-listItemActionPaddingBlock: var(--pr-t-spacings-200);
 	--components-horizontalNavigation-listItemActionPaddingInline: 0px;
-	--components-horizontalNavigation-listItemActionPadding: var(--components-horizontalNavigation-listItemActionPaddingBlock)
+	--components-horizontalNavigation-listItemActionPadding:
+		var(--components-horizontalNavigation-listItemActionPaddingBlock)
 		var(--components-horizontalNavigation-listItemActionPaddingInline);
 	--components-horizontalNavigation-listGap: 0 var(--pr-t-spacings-400);
 	--components-horizontalNavigation-listDirection: row;

package/src/components/index.scss

@@ -115,8 +115,8 @@
 @forward 'bubbleIllustration';
 @forward 'bubbleIcon';
 @forward 'softwareIcon';
+@forward 'activityFeed';
 
 @forward 'filterBarDeprecated';
 @forward 'tableFixedDeprecated';
 @forward 'tableStickedDeprecated';
-

package/src/components/indexTable/component.scss

@@ -123,7 +123,8 @@
 			// Apparence of the nexts cells
 			~ .indexTable-body-row-cell {
 				--components-indexTable-cell-inset-x-left: 0px;
-				--components-indexTable-shadow-mask: calc(var(--pr-t-spacings-100) * -1) 0px 0px 0px
+				--components-indexTable-shadow-mask:
+					calc(var(--pr-t-spacings-100) * -1) 0px 0px 0px
 					var(--components-indexTable-cell-background-color, var(--components-indexTable-cell-background-color-default));
 				--components-indexTable-cell-border-radius-left: 0;
 				--components-indexTable-outline-border-radius-left: 0;
@@ -148,27 +149,38 @@
 
 			// The "card" apparence is put on a ::before pseudo element
 			&::before {
-				inset: var(--components-indexTable-cell-inset-y, 0) var(--components-indexTable-cell-inset-x-right, 0)
-					var(--components-indexTable-cell-inset-y, 0) var(--components-indexTable-cell-inset-x-left, 0);
-				border-radius: var(--components-indexTable-cell-border-radius-left) var(--components-indexTable-cell-border-radius-right)
-					var(--components-indexTable-cell-border-radius-right) var(--components-indexTable-cell-border-radius-left);
+				inset:
+					var(--components-indexTable-cell-inset-y, 0)
+					var(--components-indexTable-cell-inset-x-right, 0)
+					var(--components-indexTable-cell-inset-y, 0)
+					var(--components-indexTable-cell-inset-x-left, 0);
+				border-radius:
+					var(--components-indexTable-cell-border-radius-left)
+					var(--components-indexTable-cell-border-radius-right)
+					var(--components-indexTable-cell-border-radius-right)
+					var(--components-indexTable-cell-border-radius-left);
 				background-color: var(--components-indexTable-cell-background-color, var(--components-indexTable-cell-background-color-default));
 
 				// shadow-mask : since the card apparence is put on every cell (du to a Safari bug), we need to hide the left part of the box shadow for everycell exept the first one.
 				// We do this with a rectangular white box-shadow above it.
-				box-shadow: var(--components-indexTable-shadow-mask, 0 0 0 0),
+				box-shadow:
+					var(--components-indexTable-shadow-mask, 0 0 0 0),
 					var(--components-indexTable-cell-shadow, var(--components-indexTable-cell-shadow-default));
 				transition-property: inset, box-shadow, background-color;
 			}
 
 			// The focus outline, when needed
 			&::after {
-				inset: calc(var(--components-indexTable-cell-inset-y, 0px) - var(--components-indexTable-outline-offset))
+				inset:
+					calc(var(--components-indexTable-cell-inset-y, 0px) - var(--components-indexTable-outline-offset))
 					calc(var(--components-indexTable-cell-inset-x-right, 0px) - var(--components-indexTable-outline-offset))
 					calc(var(--components-indexTable-cell-inset-y, 0px) - var(--components-indexTable-outline-offset))
 					calc(var(--components-indexTable-cell-inset-x-left, 0px) - var(--components-indexTable-outline-offset));
-				border-radius: var(--components-indexTable-outline-border-radius-left) var(--components-indexTable-outline-border-radius-right)
-					var(--components-indexTable-outline-border-radius-right) var(--components-indexTable-outline-border-radius-left);
+				border-radius:
+					var(--components-indexTable-outline-border-radius-left)
+					var(--components-indexTable-outline-border-radius-right)
+					var(--components-indexTable-outline-border-radius-right)
+					var(--components-indexTable-outline-border-radius-left);
 				border-block-width: var(--components-indexTable-outline-border-width);
 				border-inline-width: var(--components-indexTable-outline-border-width-left) var(--components-indexTable-outline-border-width-right);
 				border-style: solid;
@@ -224,7 +236,6 @@
 			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
-
 		.indexTable-body-row-cellTitle-title {
 			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}

package/src/components/indexTable/mods.scss

@@ -39,9 +39,11 @@
 		border-block-end: var(--components-indexTable-row-stack-border-bottom) solid transparent;
 
 		// stack apparence
-		background-image: var(--components-indexTable-row-stack2-background-image, none),
+		background-image:
+			var(--components-indexTable-row-stack2-background-image, none),
 			var(--components-indexTable-row-stack3-background-image, none);
-		background-position: var(--components-indexTable-row-stack2-background-position, 0 0),
+		background-position:
+			var(--components-indexTable-row-stack2-background-position, 0 0),
 			var(--components-indexTable-row-stack3-background-position, 0 0);
 		background-repeat: no-repeat, no-repeat;
 		transition-property: background-image, background-position;
@@ -49,9 +51,11 @@
 
 		// apparence of the first cell with a card apparence.
 		// we do this because there migh be one or two cells before without background and containing a checkbox
-		--components-indexTable-row-stack2-background-position: left calc(-2px + var(--components-indexTable-cell-inset-x-left, 0px))
+		--components-indexTable-row-stack2-background-position:
+			left calc(-2px + var(--components-indexTable-cell-inset-x-left, 0px))
 			bottom -10px;
-		--components-indexTable-row-stack3-background-position: left calc(1px + var(--components-indexTable-cell-inset-x-left, 0px))
+		--components-indexTable-row-stack3-background-position:
+			left calc(1px + var(--components-indexTable-cell-inset-x-left, 0px))
 			bottom -14px;
 
 		// apparence of the nexts cells
@@ -62,9 +66,11 @@
 
 		// apparence of the last cell with a card apparence
 		&:last-child {
-			--components-indexTable-row-stack2-background-position: right calc(-2px + var(--components-indexTable-cell-inset-x-right, 0px))
+			--components-indexTable-row-stack2-background-position:
+				right calc(-2px + var(--components-indexTable-cell-inset-x-right, 0px))
 				bottom -10px;
-			--components-indexTable-row-stack3-background-position: right calc(1px + var(--components-indexTable-cell-inset-x-right, 0px))
+			--components-indexTable-row-stack3-background-position:
+				right calc(1px + var(--components-indexTable-cell-inset-x-right, 0px))
 				bottom -14px;
 		}
 	}
@@ -200,10 +206,9 @@
 
 @mixin selectableResponsiveCardList {
 	.indexTable-body-row {
-		grid-template-columns: var(--components-indexTable-row-cell-transparent-width) var(
-			--components-indexTable-row-responsive-grid-template-columns,
-			1fr
-		);
+		grid-template-columns:
+			var(--components-indexTable-row-cell-transparent-width)
+			var(--components-indexTable-row-responsive-grid-template-columns, 1fr);
 	}
 
 	.indexTable-body-row-transparentCell {
@@ -242,9 +247,11 @@
 			position: absolute;
 			inset-block-start: 0;
 			inset-block-end: calc((var(--components-indexTable-row-spacing-responsive) + var(--components-indexTable-stack3-row-spacing)) * -1);
-			background-image: var(--components-indexTable-row-stack2-background-image, none),
+			background-image:
+				var(--components-indexTable-row-stack2-background-image, none),
 				var(--components-indexTable-row-stack3-background-image, none);
-			background-position: var(--components-indexTable-row-stack2-background-position, 0 0),
+			background-position:
+				var(--components-indexTable-row-stack2-background-position, 0 0),
 				var(--components-indexTable-row-stack3-background-position, 0 0);
 			background-repeat: no-repeat, no-repeat;
 			transition-property: background-image, background-position;
@@ -286,7 +293,8 @@
 		@include button.onlyIconS;
 
 		// .mod-delete is deprecated
-		&.mod-critical, &.mod-delete {
+		&.mod-critical,
+		&.mod-delete {
 			// For specificity purpose. Could be removed if we decide to remove automatic CSS imports in Angular components
 			@include button.critical;
 		}

package/src/components/indexTable/states.scss

@@ -24,9 +24,9 @@
 	.indexTable-body-row {
 		// We can't use focus-within because it would show actions when focusing checkboxs
 		&:has(
-				.indexTable-body-row-cell-link:focus-visible,
-				.indexTable-body-row-cell.mod-actions:focus-within
-			) {
+			.indexTable-body-row-cell-link:focus-visible,
+			.indexTable-body-row-cell.mod-actions:focus-within
+		) {
 			--components-indexTable-cell-subAction-opacity: 1;
 		}
 

package/src/components/indexTable/vars.scss

@@ -39,8 +39,9 @@
 	// Selectable specific outline
 	--components-indexTable-outline-offset: 4px;
 	--components-indexTable-outline-border-width: 2px;
-	--components-indexTable-outline-border-radius: calc(
-		var(--components-indexTable-cell-border-radius) + var(--components-indexTable-outline-offset)
-	);
+	--components-indexTable-outline-border-radius:
+		calc(
+			var(--components-indexTable-cell-border-radius) + var(--components-indexTable-outline-offset)
+		);
 	--components-indexTable-outline-color: var(--palettes-product-700);
 }

package/src/components/inputFramed/index.scss

@@ -26,7 +26,7 @@
 			@include focusVisible;
 		}
 
-		&:has(.inputFramed-header-input[aria-invalid="true"]) {
+		&:has(.inputFramed-header-input[aria-invalid='true']) {
 			@include critical;
 
 			&:hover {

package/src/components/inputFramed/states.scss

@@ -1,4 +1,3 @@
-
 @mixin hover {
 	--components-inputFramed-borderColor: var(--pr-t-color-input-border-hover);
 }

package/src/components/label/index.scss

@@ -1,5 +1,6 @@
 @use 'exports' as *;
 
+// stylelint-disable-next-line selector-disallowed-list -- .label is deprecated
 .label {
 	@layer components {
 		@include vars;

package/src/components/layout/component.scss

@@ -13,27 +13,27 @@
 		grid-template-columns: var(--commons-navSide-width) 1fr var(--components-aside-width);
 		grid-template-rows: var(--commons-banner-height) 1fr;
 		grid-template-areas:
-			'banner banner banner'
-			'navside content aside';
+			'banner  banner  banner'
+			'navside content aside ';
 	}
 
 	@include media.max('L') {
 		grid-template-columns: var(--commons-navSide-width) 1fr;
 		grid-template-rows: var(--commons-banner-height) 1fr auto;
 		grid-template-areas:
-			'banner banner'
+			'banner  banner '
 			'navside content'
-			'navside aside';
+			'navside aside  ';
 	}
 
 	@include media.max('S') {
 		grid-template-columns: 1fr;
 		grid-template-rows: var(--commons-banner-height) auto 1fr auto;
 		grid-template-areas:
-			'banner'
+			'banner '
 			'navside'
 			'content'
-			'aside';
+			'aside  ';
 	}
 
 	@at-root ($atRoot) {

package/src/components/layout/mods.scss

@@ -42,8 +42,8 @@
 		@include media.min('L') {
 			grid-template-columns: var(--commons-navSide-width) var(--components-aside-width) 1fr;
 			grid-template-areas:
-				'banner	banner banner'
-				'navside aside	content';
+				'banner  banner banner '
+				'navside aside  content';
 
 			&.mod-navsideLarge {
 				grid-template-columns: var(--commons-navSide-width) var(--components-aside-width) 1fr;

package/src/components/link/component.scss

@@ -1,22 +1,46 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
-@mixin component {
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: transparent;
-	border: 0;
-	color: var(--commons-text-link-color);
-	cursor: pointer;
+	color: var(--components-link-color);
+	cursor: var(--components-link-cursor);
 	font-family: inherit;
+	border: 0;
 	margin: 0;
 	padding: 0;
-	text-decoration: underline;
+	text-decoration: var(--components-link-textDecoration);
 
 	&:not(:disabled, .is-disabled) {
 		&:hover {
-			color: var(--commons-text-link-hover);
+			color: var(--components-link-color-hover);
 		}
 
 		&:focus-visible {
 			@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-small));
 		}
 	}
+
+	.lucca-icon {
+		text-decoration: none;
+		font-size: 1em;
+		vertical-align: baseline;
+		position: relative;
+		top: 0.075rem;
+		margin-inline-start: var(--components-link-icon-marginInlineStart);
+	}
+
+	.link-text {
+		text-decoration: var(--components-link-text-textDecoration);
+	}
+
+	@at-root ($atRoot) {
+		.link-icon {
+			white-space: nowrap;
+
+			&::before {
+				content: ' ' / '';
+			}
+		}
+	}
 }

package/src/components/link/index.scss

@@ -7,16 +7,28 @@
 	}
 
 	@layer mods {
-		&.mod-icon {
-			@include icon;
-		}
-
 		&.mod-decorationHover {
 			@include decorationHover;
+
+			&:hover {
+				@include decorationHoverHovered;
+
+				&:not(:has(.link-text)) {
+					@include decorationHoverHoveredLegacy;
+				}
+			}
 		}
 
 		&:is(:disabled, .is-disabled) {
 			@include disabled;
 		}
+
+		&:has(.link-text) {
+			@include hasLinkText;
+		}
+
+		&:not(:has(.link-icon)) {
+			@include legacyIcon;
+		}
 	}
 }