@lucca-front/scss 21.3.0-rc.6 → 21.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.3.0-rc.6",
+  "version": "21.3.0",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -24,7 +24,7 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "21.3.0-rc.6",
-    "@lucca/prisme": "21.3.0-rc.6"
+    "@lucca-front/icons": "21.3.0",
+    "@lucca/prisme": "21.3.0"
   }
 }

package/src/commons/utils/color.scss

@@ -12,14 +12,18 @@
 	@return color-mix(in $space, $color $amount, transparent);
 }
 
-@mixin palette($name, $shades: config.$palettesShades, $palette: false) {
+@mixin palette($name: '', $shades: config.$palettesShades, $palette: false) {
+	@if $name != '' {
+		$name: '-' + $name;
+	}
+
 	@each $shade in $shades {
 		@if $palette {
 			@if map.get($palette, $shade) {
-				--palettes-#{$shade}: var(--palettes-#{$name}-#{$shade});
+				--palettes-#{$shade}: var(--palettes#{$name}-#{$shade});
 			}
 		} @else {
-			--palettes-#{$shade}: var(--palettes-#{$name}-#{$shade});
+			--palettes-#{$shade}: var(--palettes#{$name}-#{$shade});
 		}
 	}
 }

package/src/commons/utils/highlight-prisme.scss

@@ -26,6 +26,7 @@
 	.textFlow,
 	.mobilePush,
 	.presentation,
+	.highlightText,
 
 	// Lists
 	.chip,
@@ -106,6 +107,7 @@
 	.avatar,
 	.userPopover,
 	.userTile,
+	.impersonation,
 
 	// Loaders
 	.loading,
@@ -142,7 +144,7 @@
 
 	// Icons
 	lu-bubble-illustration .bubbleIllustration,
-	lu-bubble-icon .bubbleIcon,
+	lu-bubble-icon,
 	lu-software-icon .softwareIcon,
 	lu-icon .lucca-icon,
 
@@ -158,6 +160,7 @@
 	lu-text-flow,
 	lu-mobile-push,
 	lu-data-presentation,
+	lu-highlight-text,
 
 	// Lists
 	lu-chip,
@@ -239,6 +242,7 @@
 	// Users
 	lu-user-picture,
 	lu-user-tile,
+	lu-impersonation,
 
 	// Loaders
 	lu-loading,
@@ -262,7 +266,7 @@
 	lu-dialog-content,
 	lu-dialog-footer,
 	lu-footer .footer,
-	lu-horizontal-navigation,
+	lu-horizontal-navigation .horizontalNavigation,
 	lu-vertical-navigation,
 	[luDataTableRow] {
 		outline: 2px solid springgreen;

package/src/commons/vars.scss

@@ -69,9 +69,9 @@
 	}
 
 	// stylelint-disable custom-property-pattern
-	--palettes-assets-primary-lighter: var(--palettes-#{config.$product}-50, var(--palettes-50));
-	--palettes-assets-primary-light: var(--palettes-#{config.$product}-100, var(--palettes-100));
-	--palettes-assets-primary-dark: var(--palettes-#{config.$product}-200, var(--palettes-200));
+	--palettes-assets-primary-lighter: var(--palettes-product-50);
+	--palettes-assets-primary-light: var(--palettes-product-100);
+	--palettes-assets-primary-dark: var(--palettes-product-200);
 	--palettes-assets-brand-lighter: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-50);
 	--palettes-assets-brand-light: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-100);
 	--palettes-assets-brand-dark: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-200);
@@ -173,4 +173,8 @@
 			@extend %prefersContrastMore;
 		}
 	}
+
+	body:has(.lucca-banner-wrapper.pr-u-prefersContrastMore) {
+		@extend %prefersContrastMore;
+	}
 }

package/src/components/appLayout/component.scss

@@ -2,7 +2,10 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	block-size: var(--components-appLayout-blockSize);
+	@media screen {
+		block-size: var(--components-appLayout-blockSize);
+	}
+
 	inline-size: var(--components-appLayout-inlineSize);
 	grid-template: var(--components-appLayout-gridTemplate);
 	display: grid;

package/src/components/avatar/component.scss

@@ -80,6 +80,8 @@
 			inline-size: var(--components-avatar-size);
 			block-size: var(--components-avatar-size);
 			font-size: var(--components-avatarWrapper-fontSize);
+			border-radius: var(--pr-t-border-radius-full);
+			background-color: var(--palettes-neutral-200);
 		}
 	}
 }

package/src/components/bubbleIcon/index.scss

@@ -7,6 +7,10 @@
 	}
 
 	@layer mods {
+		&.mod-XS {
+			@include XS;
+		}
+
 		&.mod-S {
 			@include S;
 		}

package/src/components/bubbleIcon/mods.scss

@@ -1,10 +1,18 @@
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
+@mixin XS {
+	--components-bubbleIcon-size: var(--pr-t-spacings-300);
+
+	.lucca-icon {
+		@include icon.XS;
+	}
+}
+
 @mixin S {
 	--components-bubbleIcon-size: var(--pr-t-spacings-400);
 
 	.lucca-icon {
-		@include icon.XS;
+		@include icon.S;
 	}
 }
 

package/src/components/checkbox/states.scss

@@ -7,7 +7,7 @@
 		cursor: default;
 
 		&::before {
-			border-color: var(--palettes-neutral-500); // disabled token candidate
+			border-color: var(--palettes-neutral-300); // disabled token candidate
 		}
 
 		.checkbox-label-helper {

package/src/components/checkboxField/states.scss

@@ -70,7 +70,7 @@
 	cursor: default;
 
 	~ .checkboxField-icon {
-		--component-checkboxField-borderColor: var(--palettes-neutral-500);
+		--component-checkboxField-borderColor: var(--palettes-neutral-300);
 	}
 }
 

package/src/components/dialog/component.scss

@@ -34,7 +34,7 @@
 
 	@at-root ($atRoot) {
 		.dialog-inside {
-			&:has(.dialog-inside-formOptional, .dialog-formOptional, .dialog-form) {
+			&:has(> .dialog-inside-formOptional, > .dialog-formOptional, > .dialog-form) {
 				display: contents;
 
 				.dialog-formOptional, // stylelint-disable-line selector-disallowed-list -- .dialog-formOptional is deprecated
@@ -62,7 +62,7 @@
 				}
 			}
 
-			&:not(:has(.dialog-inside-formOptional, .dialog-formOptional, .dialog-form)) {
+			&:not(:has(> .dialog-inside-formOptional, > .dialog-formOptional, > .dialog-form)) {
 				display: grid;
 				grid-template-areas:
 					'header  '
@@ -117,6 +117,7 @@
 
 		.dialog-inside-footer {
 			grid-area: footer;
+			margin-block: var(--components-dialog-inside-footer-marginBlock);
 
 			&.footer {
 				@include footer.insideDialog;
@@ -125,6 +126,7 @@
 
 		.dialog-inside-header {
 			display: grid;
+			margin-block: var(--components-dialog-inside-header-marginBlock);
 			padding-block: var(--components-dialog-inside-header-paddingBlock);
 			padding-inline: var(--components-dialog-inside-header-paddingInline);
 			grid-template-areas: var(--components-dialog-insideHeaderAreas);

package/src/components/dialog/mods.scss

@@ -109,16 +109,18 @@
 	--components-dialog-inside-header-button-position: absolute;
 	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-100);
 	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-100);
-	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50) var(--pr-t-spacings-200);
+	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50) 0;
 	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
 	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
+	--components-dialog-inside-header-marginBlock: var(--pr-t-spacings-500) 0;
+	--components-dialog-inside-footer-marginBlock: 0 var(--pr-t-spacings-500);
 
 	.dialog-inside-footer {
 		--components-footer-actions-margin: 0;
 		--components-footer-boxShadow: none;
-		--components-footer-paddingBlock: 0 var(--pr-t-spacings-150);
 		--components-footer-overflow: visible;
 		--components-footer-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
+		--components-footer-paddingBlock: var(--pr-t-spacings-300) var(--pr-t-spacings-150);
 	}
 
 	.dialog-inside-header {

package/src/components/dialog/vars.scss

@@ -39,4 +39,6 @@
 	--components-dialog-inside-fancyIllustrations-inlineSize: var(--components-dialog-inside-paddingInlineEnd);
 	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-200);
 	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-300);
+	--components-dialog-inside-header-marginBlock: 0px;
+	--components-dialog-inside-footer-marginBlock: 0px;
 }

package/src/components/footer/component.scss

@@ -13,6 +13,7 @@
 	gap: var(--components-footer-gap);
 	align-items: var(--components-footer-alignItems);
 	flex-direction: var(--components-footer-direction);
+	isolation: var(--components-footer-isolation);
 
 	@at-root ($atRoot) {
 		.footer-content {

package/src/components/footer/mods.scss

@@ -14,6 +14,7 @@
 	--components-footer-paddingInline: var(--pr-t-spacings-300);
 	--commons-container-padding: 0;
 	--components-footer-overflow: hidden;
+	--components-footer-isolation: isolate;
 }
 
 @mixin wide {

package/src/components/footer/vars.scss

@@ -12,4 +12,5 @@
 	--components-footer-gap: var(--pr-t-spacings-200);
 	--components-footer-display: flex;
 	--components-footer-container-maxInlineSize: var(--commons-container-maxWidth);
+	--components-footer-isolation: auto;
 }

package/src/components/horizontalNavigation/index.scss

@@ -1,3 +1,4 @@
+@use '@lucca-front/scss/src/commons/utils/color';
 @use 'exports' as *;
 
 // stylelint-disable-next-line selector-disallowed-list -- .menu is deprecated
@@ -69,6 +70,13 @@
 			@include active;
 		}
 
+		// .active is deprecated
+		&:not(.active, [aria-current='page'], [aria-selected='true']) {
+			.numericBadge {
+				@include color.palette;
+			}
+		}
+
 		&.disabled, // .disabled is deprecated
 		&[disabled],
 		&.is-disabled {

package/src/components/impersonation/component.scss

@@ -12,7 +12,7 @@
 		.impersonation-trigger {
 			@include reset.button;
 
-			border: 1px solid var(--components-impersonation-trigger-borderColor);
+			box-shadow: 0 0 0 1px var(--components-impersonation-trigger-borderColor);
 			background-color: var(--components-impersonation-trigger-backgroundColor);
 			border-radius: var(--pr-t-border-radius-200);
 			inline-size: fit-content;
@@ -24,7 +24,6 @@
 			min-block-size: var(--pr-t-spacings-500);
 			font-weight: var(--components-impersonation-trigger-fontWeight);
 			color: var(--components-impersonation-trigger-color);
-			box-shadow: var(--components-impersonation-trigger-boxShadow);
 			transition-property: box-shadow, border-color;
 			transition-duration: var(--commons-animations-durations-fast);
 		}

package/src/components/impersonation/vars.scss

@@ -5,7 +5,6 @@
 	--components-impersonation-trigger-fontWeight: var(--pr-t-font-fontWeight-regular);
 	--components-impersonation-trigger-color: var(--pr-t-color-text);
 	--components-impersonation-trigger-icon-color: var(--pr-t-color-text-subtle);
-	--components-impersonation-trigger-boxShadow: none;
 	--components-impersonation-clear-display: none;
 	--components-impersonation-trigger-icon-marginInlineStart: auto;
 }

package/src/components/link/component.scss

@@ -37,6 +37,9 @@
 	@at-root ($atRoot) {
 		.link-icon {
 			white-space: nowrap;
+			opacity: var(--components-link-icon-opacity);
+			transition-property: opacity;
+			transition-duration: var(--commons-animations-durations-fast);
 
 			&::before {
 				content: ' ' / '';

package/src/components/link/index.scss

@@ -1,4 +1,5 @@
 @use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
 
 .link {
 	@layer components {
@@ -19,6 +20,14 @@
 			}
 		}
 
+		@include media.isNotTouchDevice {
+			&.mod-hiddenIcon {
+				&:not(:hover, :focus-visible) {
+					@include hiddenIcon;
+				}
+			}
+		}
+
 		&:is(:disabled, .is-disabled) {
 			@include disabled;
 		}

package/src/components/link/mods.scss

@@ -17,3 +17,7 @@
 @mixin legacyIcon {
 	--components-link-icon-marginInlineStart: 0.2em;
 }
+
+@mixin hiddenIcon {
+	--components-link-icon-opacity: 0;
+}

package/src/components/link/vars.scss

@@ -5,4 +5,5 @@
 	--components-link-color-hover: var(--commons-text-link-hover);
 	--components-link-cursor: pointer;
 	--components-link-icon-marginInlineStart: 0;
+	--components-link-icon-opacity: 1;
 }

package/src/components/multiSelect/component.scss

@@ -32,10 +32,11 @@
 			flex: 1;
 		}
 
-		.multipleSelect-displayer-value {
-			display: flex;
+		.multipleSelect-displayer-suffix {
+			display: var(--components-multiSelect-displayer-suffix-display);
 			gap: var(--pr-t-spacings-50);
-			flex-wrap: wrap;
+			flex: 1;
+			order: 1;
 		}
 
 		.multipleSelect-displayer-chip.chip {

package/src/components/multiSelect/index.scss

@@ -23,10 +23,16 @@
 					@include filterPillDisplayerFocused;
 				}
 			}
+
+			&.is-selected {
+				@include filterPillSelected;
+			}
 		}
 
-		&.is-selected {
-			@include selected;
+		&:not(.mod-filterPill) {
+			&.is-selected {
+				@include selected;
+			}
 		}
 
 		&:has(.multipleSelect-displayer-search:focus-visible) {

package/src/components/multiSelect/mods.scss

@@ -37,6 +37,8 @@
 }
 
 @mixin filterPill {
+	--components-multiSelect-displayer-suffix-display: flex;
+
 	flex-direction: column;
 	align-items: stretch;
 	box-shadow: none;

package/src/components/multiSelect/states.scss

@@ -42,8 +42,16 @@
 
 @mixin selected {
 	.multipleSelect-displayer-search {
-		&[readonly],
-		&:not(:focus) {
+		&:not(:focus),
+		&[readonly] {
+			@include a11y.mask;
+		}
+	}
+}
+
+@mixin filterPillSelected {
+	.multipleSelect-displayer-search {
+		&[readonly] {
 			@include a11y.mask;
 		}
 	}

package/src/components/multiSelect/vars.scss

@@ -6,4 +6,5 @@
 	--components-multiSelect-border-color: var(--pr-t-color-input-border);
 	--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);
 	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);
+	--components-multiSelect-displayer-suffix-display: contents;
 }

package/src/components/numericBadge/component.scss

@@ -8,8 +8,6 @@
 	min-inline-size: var(--components-numericBadge-size);
 	padding: var(--pr-t-spacings-50);
 	font: var(--components-numericBadge-font);
-	font-size: var(--components-numericBadge-fontSize); // Deprecated
-	line-height: var(--components-numericBadge-lineHeight); // Deprecated
 	font-weight: var(--pr-t-font-fontWeight-semibold);
 	background-color: var(--components-numericBadge-background);
 	color: var(--components-numericBadge-color);

package/src/components/numericBadge/mods.scss

@@ -4,30 +4,18 @@
 	--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);
 	--components-numericBadge-font: var(--pr-t-font-body-XS);
-
-	// Deprecated
-	--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);
-	--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight);
 }
 
 @mixin XS {
 	--components-numericBadge-size: 1rem;
 	--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);
 	--components-numericBadge-font: var(--pr-t-font-body-XS);
-
-	// Deprecated
-	--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);
-	--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight);
 }
 
 @mixin inherit {

package/src/components/numericBadge/vars.scss

@@ -5,8 +5,4 @@
 	--components-numericBadge-size: 1.5rem;
 	--components-numericBadge-font: var(--pr-t-font-body-S);
 	--components-numericBadge-borderRadius: var(--pr-t-border-radius-default);
-
-	// Deprecated
-	--components-numericBadge-fontSize: var(--pr-t-font-body-S-fontSize);
-	--components-numericBadge-lineHeight: var(--pr-t-font-body-S-lineHeight);
 }

package/src/components/radio/states.scss

@@ -4,7 +4,7 @@
 		cursor: default;
 
 		&::before {
-			border-color: var(--palettes-neutral-500);
+			border-color: var(--palettes-neutral-300);
 			border-width: 2px;
 			border-style: solid;
 		}
@@ -18,13 +18,13 @@
 @mixin disabledChecked {
 	~ .radio-label {
 		&::before {
-			border-color: var(--palettes-neutral-500); // disabled token candidate
+			border-color: var(--palettes-neutral-300); // disabled token candidate
 			border-width: 2px;
 			border-style: solid;
 		}
 
 		&::after {
-			background-color: var(--palettes-neutral-500); // disabled token candidate
+			background-color: var(--palettes-neutral-300); // disabled token candidate
 		}
 	}
 }

package/src/components/radioField/states.scss

@@ -28,8 +28,8 @@
 
 @mixin checkedDisabled {
 	~ .radioField-icon {
-		background-color: var(--palettes-neutral-500); // disabled token candidate
-		border-color: var(--palettes-neutral-500); // disabled token candidate
+		background-color: var(--palettes-neutral-300); // disabled token candidate
+		border-color: var(--palettes-neutral-300); // disabled token candidate
 		color: var(--palettes-neutral-500); // disabled token candidate
 	}
 }
@@ -58,7 +58,7 @@
 	cursor: default;
 
 	~ .radioField-icon {
-		border-color: var(--palettes-neutral-500); // disabled token candidate
+		border-color: var(--palettes-neutral-300); // disabled token candidate
 	}
 }
 

package/src/components/skipLinks/component.scss

@@ -5,6 +5,9 @@
 	list-style-type: none;
 	justify-content: center;
 	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--pr-t-spacings-100);
 	margin: 0;
 	padding: 0;
 	z-index: 9010;
@@ -12,6 +15,12 @@
 	inset-block-end: auto;
 
 	@at-root ($atRoot) {
+		.skipLinks_target {
+			&:focus-visible {
+				@include a11y.focusVisible;
+			}
+		}
+
 		.skipLinks-action {
 			border: 0;
 			margin: 0;