@lucca-front/scss 21.1.3 → 21.2.0-rc.3

package/src/components/link/mods.scss

@@ -1,62 +1,19 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
-@mixin icon($atRoot: namespace.$defaultAtRoot) {
-	.lucca-icon {
-		text-decoration: none;
-		font-size: 1em;
-		vertical-align: baseline;
-		position: relative;
-		top: 0.075rem; // magic number
-	}
-
-	&:has(.link-text) {
-		text-decoration: none;
-	}
-
-	&:not(:has(.link-icon)) {
-		.lucca-icon {
-			margin-inline-start: 0.2em;
-		}
-	}
-
-	@at-root ($atRoot) {
-		.link-text {
-			text-decoration: underline;
-		}
-
-		.link-icon {
-			white-space: nowrap;
-
-			&::before {
-				// stylelint-disable-next-line no-irregular-whitespace
-				content: ' ' / '';
-			}
-		}
-	}
-}
-
 @mixin decorationHover {
-	&,
-	.link-text {
-		text-decoration: none;
-	}
+	--components-link-textDecoration: none;
+	--components-link-text-textDecoration: none;
+}
 
-	&:not(:has(.link-text)) {
-		&:hover {
-			text-decoration: underline;
-		}
-	}
+@mixin brand {
+	--components-link-color: var(--palettes-brand-700);
+	--components-link-color-hover: var(--palettes-brand-800);
+}
 
-	&:has(.link-text) {
-		&:hover {
-			.link-text {
-				text-decoration: underline;
-			}
-		}
-	}
+@mixin hasLinkText {
+	--components-link-textDecoration: none;
 }
 
-@mixin brand {
-	--commons-text-link-color: var(--palettes-brand-700);
-	--commons-text-link-hover: var(--palettes-brand-800);
+@mixin legacyIcon {
+	--components-link-icon-marginInlineStart: 0.2em;
 }

package/src/components/link/states.scss

@@ -1,4 +1,12 @@
 @mixin disabled {
-	color: var(--pr-t-color-text-disabled);
-	cursor: not-allowed;
+	--components-link-color: var(--pr-t-color-text-disabled);
+	--components-link-cursor: not-allowed;
+}
+
+@mixin decorationHoverHovered {
+	--components-link-text-textDecoration: underline;
+}
+
+@mixin decorationHoverHoveredLegacy {
+	--components-link-textDecoration: underline;
 }

package/src/components/link/vars.scss

@@ -1,2 +1,8 @@
 @mixin vars {
+	--components-link-textDecoration: underline;
+	--components-link-text-textDecoration: underline;
+	--components-link-color: var(--commons-text-link-color);
+	--components-link-color-hover: var(--commons-text-link-hover);
+	--components-link-cursor: pointer;
+	--components-link-icon-marginInlineStart: 0;
 }

package/src/components/listboxOption/index.scss

@@ -27,7 +27,7 @@
 			}
 		}
 
-		&[role="group"] {
+		&[role='group'] {
 			@include group;
 
 			&:hover,
@@ -48,12 +48,12 @@
 			}
 		}
 
-		&[aria-hidden="true"] {
+		&[aria-hidden='true'] {
 			@include empty;
 		}
 
-		&[aria-selected="true"],
-		&[aria-checked="true"] {
+		&[aria-selected='true'],
+		&[aria-checked='true'] {
 			> .listboxOption-content {
 				@include selected;
 
@@ -68,7 +68,7 @@
 			}
 		}
 
-		&[aria-disabled="true"] {
+		&[aria-disabled='true'] {
 			> .listboxOption-content {
 				@include disabled;
 
@@ -77,8 +77,8 @@
 				}
 			}
 
-			&[aria-selected="true"],
-			&[aria-checked="true"] {
+			&[aria-selected='true'],
+			&[aria-checked='true'] {
 				> .listboxOption-content {
 					@include selectedDisabled;
 				}
@@ -119,7 +119,7 @@
 	}
 
 	@layer mods {
-		&[aria-busy="true"] {
+		&[aria-busy='true'] {
 			@include busy;
 		}
 
@@ -142,8 +142,8 @@
 						@include multipleActive;
 					}
 
-					&[aria-selected="true"],
-					&[aria-checked="true"] {
+					&[aria-selected='true'],
+					&[aria-checked='true'] {
 						> .listboxOption-content {
 							@include multipleSelected;
 
@@ -158,7 +158,7 @@
 						}
 					}
 
-					&[aria-checked="mixed"] {
+					&[aria-checked='mixed'] {
 						> .listboxOption-content {
 							@include multipleMixed;
 
@@ -173,19 +173,19 @@
 						}
 					}
 
-					&[aria-disabled="true"], {
+					&[aria-disabled='true'], {
 						> .listboxOption-content {
 							@include multipleDisabled;
 						}
 
-						&[aria-selected="true"],
-						&[aria-checked="true"] {
+						&[aria-selected='true'],
+						&[aria-checked='true'] {
 							> .listboxOption-content {
 								@include multipleSelectedDisabled;
 							}
 						}
 
-						&[aria-checked="mixed"] {
+						&[aria-checked='mixed'] {
 							> .listboxOption-content {
 								@include multipleMixedDisabled;
 							}

package/src/components/listboxOption/mods.scss

@@ -28,9 +28,9 @@
 		--components-listboxOption-content-insetBlockStart: var(--pr-t-spacings-50);
 		--components-listboxOption-content-boxShadow:
 			calc(var(--pr-t-spacings-100) * -1) 0 0 0 var(--pr-t-elevation-surface-raised),
-			calc(var(--pr-t-spacings-100) * +1) 0 0 0 var(--pr-t-elevation-surface-raised),
+			calc(var(--pr-t-spacings-100) * 1)  0 0 0 var(--pr-t-elevation-surface-raised),
 			calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised),
-			calc(var(--pr-t-spacings-100) * +1) calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised);
+			calc(var(--pr-t-spacings-100) * 1)  calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised);
 	}
 
 	.listboxOptionWrapper {
@@ -48,9 +48,8 @@
 		--components-listboxOption-content-fontWeight: var(--pr-t-font-fontWeight-semibold);
 		--components-listboxOption-content-marginBlockStart: var(--pr-t-spacings-100);
 		--components-listboxOption-content-boxShadow:
-			calc(var(--pr-t-spacings-50) * +1) 0 0 var(--pr-t-spacings-50) var(--pr-t-elevation-surface-raised),
+			calc(var(--pr-t-spacings-50) * 1)  0 0 var(--pr-t-spacings-50) var(--pr-t-elevation-surface-raised),
 			calc(var(--pr-t-spacings-50) * -1) 0 0 var(--pr-t-spacings-50) var(--pr-t-elevation-surface-raised);
-
 	}
 }
 

package/src/components/listboxOption/states.scss

@@ -1,4 +1,4 @@
-@use "@lucca-front/scss/src/components/checkboxField/exports" as checkboxField;
+@use '@lucca-front/scss/src/components/checkboxField/exports' as checkboxField;
 
 @mixin disabled {
 	--components-listboxOption-content-backgroundColor: var(--pr-t-elevation-surface-raised);
@@ -30,7 +30,7 @@
 	--components-listboxOption-content-backgroundColor: var(--palettes-product-50);
 	--components-listboxOption-content-before-backgroundColor: var(--palettes-product-700);
 
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.checked;
 		@include checkboxField.mixed;
 	}
@@ -39,7 +39,7 @@
 @mixin multipleMixedHover {
 	--components-listboxOption-content-backgroundColor: var(--palettes-product-100);
 
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.checkedHover;
 	}
 }
@@ -47,7 +47,7 @@
 @mixin multipleMixedActive {
 	--components-listboxOption-content-backgroundColor: var(--palettes-product-200);
 
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.checkedActive;
 	}
 }
@@ -57,7 +57,7 @@
 	--components-listboxOption-content-color: var(--palettes-neutral-500);
 	--components-listboxOption-content-cursor: default;
 
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.checkedDisabled;
 	}
 }
@@ -117,43 +117,43 @@
 }
 
 @mixin multipleSelected {
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.checked;
 	}
 }
 
 @mixin multipleHover {
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.hover;
 	}
 }
 
 @mixin multipleActive {
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.active;
 	}
 }
 
 @mixin multipleSelectedHover {
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.checkedHover;
 	}
 }
 
 @mixin multipleSelectedActive {
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.checkedActive;
 	}
 }
 
 @mixin multipleDisabled {
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.disabled;
 	}
 }
 
 @mixin multipleSelectedDisabled {
-	.listboxOption-content-checkboxField-input  {
+	.listboxOption-content-checkboxField-input {
 		@include checkboxField.checkedDisabled;
 	}
 }
@@ -163,4 +163,3 @@
 		--components-listboxOption-content-color: var(--palettes-product-800);
 	}
 }
-

package/src/components/listing/component.scss

@@ -20,6 +20,8 @@
 			align-items: flex-start;
 			gap: var(--pr-t-spacings-100);
 			margin-inline-start: 0;
+			position: relative;
+			counter-increment: var(--components-listing-item-counterIncrement);
 
 			&::marker {
 				line-height: 1;
@@ -33,6 +35,27 @@
 			}
 		}
 
+		.listing-item-number {
+			font: var(--pr-t-font-body-S);
+			font-weight: var(--pr-t-font-fontWeight-semibold);
+			display: var(--components-listing-item-number-display);
+			position: absolute;
+			inset-inline-end: 100%;
+			padding: 0 var(--pr-t-spacings-25);
+			min-inline-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
+			block-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
+			place-items: center;
+			background-color: var(--palettes-100, var(--palettes-product-100));
+			color: var(--palettes-700, var(--palettes-product-700));
+			border-radius: var(--pr-t-border-radius-small);
+			margin-inline-end: var(--pr-t-spacings-100);
+			margin-block-start: calc(var(--pr-t-spacings-25) / 2);
+
+			&::before {
+				content: counter(listing) / '';
+			}
+		}
+
 		.listing-item-icon {
 			inline-size: var(--pr-t-spacings-250);
 			aspect-ratio: 1;
@@ -40,7 +63,7 @@
 			background-color: var(--components-listing-item-icon-backgroundColor);
 			color: var(--palettes-700, var(--palettes-neutral-700));
 			border-radius: var(--pr-t-border-radius-full);
-			display: flex;
+			display: inline-flex !important;
 
 			@include icon.S;
 		}

package/src/components/listing/index.scss

@@ -10,6 +10,10 @@
 		&.mod-ordered,
 		&:is(ol) {
 			@include ordered;
+
+			&.mod-fancy {
+				@include fancy;
+			}
 		}
 
 		&.mod-inline {

package/src/components/listing/mods.scss

@@ -10,7 +10,7 @@
 	--components-listing-paddingInlineStart: 0;
 	--components-listing-item-display: flex;
 
-	.listing-item-icon.lucca-icon {
+	.listing-item-icon {
 		&:not([class*='icon-']) {
 			&::before {
 				--icon-content: var(--components-listing-item-icon-before-content);
@@ -22,10 +22,13 @@
 @mixin checklist {
 	--components-listing-paddingInlineStart: 0;
 	--components-listing-item-display: flex;
-	--components-listing-item-icon-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));
 
-	.listing-item-icon.lucca-icon {
-		@include icon.generate('sign_confirm');
+	.listing-item-icon {
+		--components-listing-item-icon-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));
+
+		&:not(.icon-signClose) {
+			@include icon.generate('sign_confirm');
+		}
 	}
 }
 
@@ -87,13 +90,21 @@
 
 @mixin hideFirstItems {
 	--components-listing-marginInlineStart: calc(var(--components-listing-inlineFirst) * -1);
-	--components-listing-clipPath: inset(
-		calc(var(--pr-t-spacings-50) * -1) calc(var(--pr-t-spacings-50) * -1) calc(var(--pr-t-spacings-50) * -1)
+	--components-listing-clipPath:
+		inset(
+			calc(var(--pr-t-spacings-50) * -1) calc(var(--pr-t-spacings-50) * -1) calc(var(--pr-t-spacings-50) * -1)
 			calc(var(--components-listing-inlineFirst) - var(--pr-t-spacings-50))
-	);
+		);
 }
 
 @mixin divider {
 	--components-listing-item-before-content: '';
 	--components-listing-inlineFirst: calc(var(--pr-t-spacings-100) + var(--pr-t-spacings-25) - var(--commons-divider-width));
 }
+
+@mixin fancy {
+	counter-reset: listing;
+
+	--components-listing-listStyleType: '' !important;
+	--components-listing-item-number-display: grid;
+}

package/src/components/listing/vars.scss

@@ -10,7 +10,6 @@
 	--components-listing-listStyleType: disc;
 
 	--components-listing-item-display: list-item;
-	--components-listing-item-icon-backgroundColor: transparent;
 	--components-listing-item-icon-before-content: none;
 	--components-listing-item-before-content: unset;
 
@@ -18,4 +17,9 @@
 	--components-listing-item-content-flexWrap: nowrap;
 	--components-listing-item-content-rowGap: 0;
 	--components-listing-item-content-columnGap: 0;
+
+	--components-listing-item-number-display: none;
+	--components-listing-item-counterIncrement: listing;
+
+	--components-listing-item-icon-backgroundColor: transparent;
 }

package/src/components/mobilePush/component.scss

@@ -27,7 +27,7 @@
 		}
 
 		.mobilePush-icons-front {
-			grid-area: 1 / 1 ;
+			grid-area: 1 / 1;
 			color: var(--palettes-brand-600);
 			z-index: 1;
 			padding-inline-start: 0.0625rem;

package/src/components/navside/index.scss

@@ -34,6 +34,7 @@
 						@include compactHover;
 					}
 
+					// .active is deprecated
 					&:is(.is-active, .active) {
 						@include compactActive;
 					}
@@ -93,6 +94,7 @@
 					@include sublinkHover;
 				}
 
+				// .active is deprecated
 				&:is(.is-active, .active) {
 					@include sublinkActive;
 				}
@@ -102,6 +104,7 @@
 
 	.navSide-item-subMenu-link,
 	.navSide-item-link {
+		// .active is deprecated
 		&:is(.is-active, .active) {
 			@include active;
 		}

package/src/components/navside/states.scss

@@ -34,7 +34,8 @@
 	overflow-x: hidden;
 	overflow-y: auto;
 
-	.navSide-bottomSection, .navSide-scrollWrapper {
+	.navSide-bottomSection,
+	.navSide-scrollWrapper {
 		padding: 0.5em;
 	}
 }

package/src/components/notchBox/component.scss

@@ -4,21 +4,25 @@
 	.notchBox-wrapper {
 		inline-size: 100%;
 		min-block-size: var(--component-notchbox-box-min-height);
-		padding-block: var(--component-notchbox-box-padding-top, var(--component-notchbox-box-padding))
+		padding-block:
+			var(--component-notchbox-box-padding-top, var(--component-notchbox-box-padding))
 			var(--component-notchbox-box-padding-bottom, var(--component-notchbox-box-padding));
-		padding-inline: var(--component-notchbox-box-padding-left, var(--component-notchbox-box-padding))
+		padding-inline:
+			var(--component-notchbox-box-padding-left, var(--component-notchbox-box-padding))
 			var(--component-notchbox-box-padding-right, var(--component-notchbox-box-padding));
 		border-radius: var(--component-notchbox-box-radius);
+
+		// gradient[ position / size]
 		background:
 			linear-gradient(var(--component-notchbox-box-background-color), var(--component-notchbox-box-background-color))
-				var(--component-notchbox-notch-gradient1-anchor) / var(--component-notchbox-notch-gradient1-ref1)
-				var(--component-notchbox-notch-gradient1-ref2),
+			var(--component-notchbox-notch-gradient1-anchor)
+			/ var(--component-notchbox-notch-gradient1-ref1) var(--component-notchbox-notch-gradient1-ref2),
 			linear-gradient(var(--component-notchbox-box-background-color), var(--component-notchbox-box-background-color))
-				var(--component-notchbox-notch-gradient2-anchor) / var(--component-notchbox-notch-gradient2-ref1)
-				var(--component-notchbox-notch-gradient2-ref2),
+			var(--component-notchbox-notch-gradient2-anchor)
+			/ var(--component-notchbox-notch-gradient2-ref1) var(--component-notchbox-notch-gradient2-ref2),
 			linear-gradient(var(--component-notchbox-box-background-color), var(--component-notchbox-box-background-color))
-				var(--component-notchbox-notch-gradient3-anchor) / var(--component-notchbox-notch-gradient3-ref1)
-				var(--component-notchbox-notch-gradient3-ref2),
+			var(--component-notchbox-notch-gradient3-anchor)
+			/ var(--component-notchbox-notch-gradient3-ref1) var(--component-notchbox-notch-gradient3-ref2),
 			radial-gradient(
 				circle at var(--component-notchbox-notch-gradient4-x) var(--component-notchbox-notch-gradient4-y),
 				var(--component-notchbox-box-background-color) var(--component-notchbox-notch-radius-outer),
@@ -30,27 +34,27 @@
 				transparent calc(var(--component-notchbox-notch-radius-outer) + var(--smooth))
 			),
 			linear-gradient(var(--component-notchbox-box-background-color), var(--component-notchbox-box-background-color))
-				var(--component-notchbox-notch-gradient6-anchor) / var(--component-notchbox-notch-gradient6-ref1)
-				var(--component-notchbox-notch-gradient6-ref2),
+			var(--component-notchbox-notch-gradient6-anchor)
+			/ var(--component-notchbox-notch-gradient6-ref1) var(--component-notchbox-notch-gradient6-ref2),
 			linear-gradient(var(--component-notchbox-box-background-color), var(--component-notchbox-box-background-color))
-				var(--component-notchbox-notch-gradient7-anchor) / var(--component-notchbox-notch-gradient7-ref1)
-				var(--component-notchbox-notch-gradient7-ref2),
+			var(--component-notchbox-notch-gradient7-anchor)
+			/ var(--component-notchbox-notch-gradient7-ref1) var(--component-notchbox-notch-gradient7-ref2),
 			radial-gradient(
-					var(--component-notchbox-notch-radius-inner) var(--component-notchbox-notch-radius-inner) at
-						var(--component-notchbox-notch-gradient8-anchor),
-					transparent calc(var(--component-notchbox-notch-radius-inner) - var(--smooth) * 2),
-					var(--component-notchbox-box-background-color) var(--component-notchbox-notch-radius-inner)
-				)
-				var(--component-notchbox-notch-gradient8-x) var(--component-notchbox-notch-gradient8-y) /
-				var(--component-notchbox-notch-radius-inner) calc(var(--component-notchbox-notch-radius-inner) + var(--smooth)),
+				var(--component-notchbox-notch-radius-inner) var(--component-notchbox-notch-radius-inner)
+				at var(--component-notchbox-notch-gradient8-anchor),
+				transparent calc(var(--component-notchbox-notch-radius-inner) - var(--smooth) * 2),
+				var(--component-notchbox-box-background-color) var(--component-notchbox-notch-radius-inner)
+			)
+			var(--component-notchbox-notch-gradient8-x) var(--component-notchbox-notch-gradient8-y)
+			/ var(--component-notchbox-notch-radius-inner) calc(var(--component-notchbox-notch-radius-inner) + var(--smooth)),
 			radial-gradient(
-					var(--component-notchbox-notch-radius-inner) var(--component-notchbox-notch-radius-inner) at
-						var(--component-notchbox-notch-gradient9-anchor),
-					transparent calc(var(--component-notchbox-notch-radius-inner) - var(--smooth) * 2),
-					var(--component-notchbox-box-background-color) var(--component-notchbox-notch-radius-inner)
-				)
-				var(--component-notchbox-notch-gradient9-x) var(--component-notchbox-notch-gradient9-y) /
-				var(--component-notchbox-notch-radius-inner) calc(var(--component-notchbox-notch-radius-inner) + var(--smooth));
+				var(--component-notchbox-notch-radius-inner) var(--component-notchbox-notch-radius-inner)
+				at var(--component-notchbox-notch-gradient9-anchor),
+				transparent calc(var(--component-notchbox-notch-radius-inner) - var(--smooth) * 2),
+				var(--component-notchbox-box-background-color) var(--component-notchbox-notch-radius-inner)
+			)
+			var(--component-notchbox-notch-gradient9-x) var(--component-notchbox-notch-gradient9-y)
+			/ var(--component-notchbox-notch-radius-inner) calc(var(--component-notchbox-notch-radius-inner) + var(--smooth));
 		background-repeat: no-repeat;
 		filter: drop-shadow(var(--component-notchbox-box-shadow));
 	}