@lucca-front/scss 21.2.1 → 21.2.3-rc.4

package/package.json

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

package/src/commons/config.scss

@@ -73,7 +73,7 @@ $fontTokens: (
 	highlight-XXL-lineHeight: var(--pr-t-font-lineHeight-400),
 	highlight-XXL-fontWeight: var(--pr-t-font-fontWeight-black),
 	highlight-XL-fontSize: var(--pr-t-font-fontSize-275),
-	highlight-XL-lineHeight: var(--pr-t-font-lineHeight-350),
+	highlight-XL-lineHeight: var(--pr-t-font-lineHeight-300),
 	highlight-XL-fontWeight: var(--pr-t-font-fontWeight-bold),
 	highlight-L-fontSize: var(--pr-t-font-fontSize-225),
 	highlight-L-lineHeight: var(--pr-t-font-lineHeight-300),
@@ -378,7 +378,7 @@ $critical: (
 	text: #ffffff,
 	0: #ffffff,
 	50: #ffebec,
-	100: #ffd6d8,
+	100: #ffd2d4,
 	200: #fdbebe,
 	300: #faa3a3,
 	400: #fa8989,
@@ -492,7 +492,7 @@ $lavender: (
 	600: #9165d2,
 	700: #7647bd,
 	800: #5f369b,
-	900: #4a2a79,
+	900: #24075a,
 ) !default;
 
 $grape: (

package/src/commons/utils/index.scss

@@ -13,10 +13,109 @@
 @use '@lucca-front/scss/src/commons/utils/container';
 @use '@lucca-front/scss/src/components/title/exports' as title;
 
+@mixin animated {
+	&FadeIn {
+		@extend %animatedFadeIn;
+	}
+
+	&ScaleIn {
+		@extend %animatedScaleIn;
+	}
+
+	&ScaleOut {
+		@extend %animatedScaleOut;
+	}
+
+	&ScaleInTop {
+		@extend %animatedScaleInTop;
+	}
+
+	&ScaleOutTop {
+		@extend %animatedScaleOutTop;
+	}
+
+	&ScaleInRight {
+		@extend %animatedScaleInRight;
+	}
+
+	&ScaleOutRight {
+		@extend %animatedScaleOutRight;
+	}
+
+	&ScaleInBottom {
+		@extend %animatedScaleInBottom;
+	}
+
+	&ScaleOutBottom {
+		@extend %animatedScaleOutBottom;
+	}
+
+	&ScaleInLeft {
+		@extend %animatedScaleInLeft;
+	}
+
+	&ScaleOutLeft {
+		@extend %animatedScaleOutLeft;
+	}
+
+	&SlideIn {
+		@extend %animatedSlideIn;
+	}
+
+	&SlideInTop {
+		@extend %animatedSlideInTop;
+	}
+
+	&SlideOut {
+		@extend %animatedSlideOut;
+	}
+
+	&SlideOutTop {
+		@extend %animatedSlideOutTop;
+	}
+
+	&SlideInRight {
+		@extend %animatedSlideInRight;
+	}
+
+	&SlideOutRight {
+		@extend %animatedSlideOutRight;
+	}
+
+	&SlideInBottom {
+		@extend %animatedSlideInBottom;
+	}
+
+	&SlideOutBottom {
+		@extend %animatedSlideOutBottom;
+	}
+
+	&SlideInLeft {
+		@extend %animatedSlideInLeft;
+	}
+
+	&SlideOutLeft {
+		@extend %animatedSlideOutLeft;
+	}
+
+	&Shake {
+		@extend %animatedShake;
+	}
+
+	&Pulse {
+		@extend %animatedPulse;
+	}
+
+	&FadeOut {
+		@extend %animatedFadeOut;
+	}
+}
+
 @layer utils {
 	%animatedAll {
 		animation-duration: var(--commons-animations-duration, var(--commons-animations-durations-standard));
 		animation-timing-function: var(--commons-animations-function);
+		animation-fill-mode: both;
 
 		&.mod-animation-duration-fast {
 			--commons-animations-duration: var(--commons-animations-durations-fast);
@@ -46,7 +145,7 @@
 		&ScaleOutTop {
 			animation-name: scaleInTop;
 
-			@include keyframe.scaleIn;
+			@include keyframe.scaleInTop;
 		}
 
 		&ScaleInRight,
@@ -296,7 +395,7 @@
 	}
 
 	.pr-u-animated {
-		@extend %animated;
+		@include animated;
 	}
 
 	.pr-u-mask {
@@ -575,7 +674,7 @@
 		}
 
 		.u-animated {
-			@extend %animated;
+			@include animated;
 		}
 
 		.u-mask {

package/src/components/appLayout/mods.scss

@@ -2,13 +2,13 @@
 	--components-appLayout-gridTemplate:
 		'banner  banner' var(--commons-banner-height)
 		'navSide main  ' 1fr
-		/ auto    1fr;
+		/ auto 1fr;
 }
 
 @mixin mobileNavSideBottom {
 	--components-appLayout-gridTemplate:
 		'banner ' var(--commons-banner-height)
-		'main'    1fr
+		'main' 1fr
 		'navSide' auto;
 	--components-appLayout-navSide-overflowX: visible;
 	--components-appLayout-navSide-overflowY: visible;

package/src/components/avatar/component.scss

@@ -74,11 +74,9 @@
 
 		.avatarWrapper-item-action-more {
 			box-shadow: 0 0 0 var(--components-avatar-border) var(--components-avatar-background);
-			border-radius: var(--pr-t-border-radius-full);
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			background-color: var(--palettes-neutral-200);
 			inline-size: var(--components-avatar-size);
 			block-size: var(--components-avatar-size);
 			font-size: var(--components-avatarWrapper-fontSize);

package/src/components/dialog/component.scss

@@ -130,7 +130,7 @@
 			grid-template-areas: var(--components-dialog-insideHeaderAreas);
 			grid-template-columns: var(--components-dialog-insideHeaderColumns);
 			box-shadow: var(--components-dialog-inside-header-boxShadow);
-			gap: var(--pr-t-spacings-200);
+			gap: 0 var(--pr-t-spacings-200);
 			position: var(--components-dialog-inside-header-position);
 			z-index: 1;
 			grid-area: header;
@@ -142,6 +142,14 @@
 			inset-inline-end: var(--components-dialog-inside-header-button-insetInlineEnd);
 		}
 
+		.dialog-inside-header-content {
+			grid-area: content;
+
+			&:empty {
+				display: none;
+			}
+		}
+
 		.dialog-inside-content {
 			background-color: var(--components-dialog-insideContent-background);
 			padding-block: var(--components-dialog-insideContent-paddingBlock);
@@ -163,6 +171,12 @@
 			overflow-wrap: anywhere;
 		}
 
+		.dialog-inside-header-container-subtitle {
+			font: var(--pr-t-font-body-S);
+			color: var(--palettes-neutral-700);
+			text-align: var(--components-dialog-insideHeaderTitleAlign);
+		}
+
 		.dialog_backdrop {
 			background-color: var(--palettes-neutral-900);
 			position: fixed;

package/src/components/dialog/mods.scss

@@ -91,14 +91,16 @@
 }
 
 @mixin withAction {
-	--components-dialog-insideHeaderAreas: 'container action close';
+	--components-dialog-insideHeaderAreas:
+		'container action close'
+		'content content content';
 	--components-dialog-insideHeaderColumns: 1fr auto auto;
 }
 
 @mixin fancy {
 	// padding and minimum height are in pixels because they correspond to the size of the image
 	--components-dialog-inside-paddingInlineEnd: 224px;
-	--components-dialog-minBlockSize: calc(288px + var(--pr-t-spacings-400));
+	--components-dialog-minBlockSize: calc(288px + var(--pr-t-spacings-200));
 	--components-dialog-inside-gridTemplateRows: auto auto auto;
 	--components-dialog-inside-alignContent: center;
 	--components-dialog-inside-header-boxShadow: none;
@@ -132,7 +134,7 @@
 @mixin fancySmall {
 	// padding and minimum height are in pixels because they correspond to the size of the image
 	--components-dialog-inside-paddingInlineEnd: 168px;
-	--components-dialog-minBlockSize: calc(216px + var(--pr-t-spacings-400));
+	--components-dialog-minBlockSize: calc(216px + var(--pr-t-spacings-200));
 }
 
 @mixin fancyNarrow {

package/src/components/dialog/vars.scss

@@ -8,7 +8,9 @@
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
 	--components-dialog-inset: 0 var(--commons-pushPanel-inlineSize) 0 0;
 	--components-dialog-animationOpening: scaleIn;
-	--components-dialog-insideHeaderAreas: 'container close';
+	--components-dialog-insideHeaderAreas:
+		'container close'
+		'content content';
 	--components-dialog-insideHeaderTitleAlign: left;
 	--components-dialog-insideHeaderTitlePadding: calc(var(--pr-t-spacings-50) / 2) 0;
 	--components-dialog-insideHeaderButtonDisplay: flex;

package/src/components/fieldset/component.scss

@@ -37,11 +37,13 @@
 			gap: var(--components-fieldset-gap);
 			max-inline-size: var(--components-fieldset-contentMaxWidth);
 
-			.lucca-icon {
-				transform: rotate(var(--components-fieldset-title-iconRotation));
-				transition-property: transform;
-				transition-duration: var(--commons-animations-durations-fast);
-				color: var(--palettes-neutral-700);
+			&[aria-expanded] {
+				.icon-arrowChevronBottom {
+					transform: rotate(var(--components-fieldset-title-iconRotation));
+					transition-property: transform;
+					transition-duration: var(--commons-animations-durations-fast);
+					color: var(--palettes-neutral-700);
+				}
 			}
 		}
 

package/src/components/inputFramed/states.scss

@@ -3,10 +3,17 @@
 }
 
 @mixin disabled {
-
 	--components-inputFramed-header-borderColor: var(--palettes-neutral-50);
 	--components-inputFramed-borderColor: var(--palettes-neutral-300);
 	--components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled);
+
+	.inputFramed-header-label {
+		--components-formLabel-color: var(--pr-t-color-text-disabled);
+	}
+
+	.inlineMessage {
+		--components-inlineMessage-color: var(--pr-t-color-text-disabled);
+	}
 }
 
 @mixin checked {

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,7 +48,7 @@
 		--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/resourceCard/mods.scss

@@ -13,9 +13,9 @@
 	--components-resourceCard-layout-header-alignItems: start;
 	--components-resourceCard-layout-header-flexDirection: column;
 	--components-resourceCard-layout-gridTemplate:
-		'before  header  after'   auto
+		'before  header  after' auto
 		'content content content' auto
-		/auto    1fr     auto;
+		/auto 1fr auto;
 }
 
 @mixin wrapped {
@@ -44,8 +44,8 @@
 @mixin hasNoContentHasIllustrationNoGrid {
 	--components-resourceCard-layout-alignItems: center;
 	--components-resourceCard-layout-gridTemplate:
-		'before  header  after'  1fr
-		/auto    1fr     auto;
+		'before  header  after' 1fr
+		/auto 1fr auto;
 }
 
 @mixin hasContentNoGridHasIllustration {

package/src/components/resourceCard/vars.scss

@@ -25,7 +25,7 @@
 	--components-resourceCard-layout-gridTemplate:
 		'before header  after' auto
 		'before content after' 1fr
-		/ auto   1fr     auto;
+		/ auto 1fr auto;
 }
 
 @mixin varsWrapper {

package/src/components/richText/component.scss

@@ -12,6 +12,7 @@
 	border-style: solid;
 	border-width: 1px;
 	border-radius: var(--pr-t-border-radius-input);
+	overflow: auto;
 
 	&:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) {
 		min-block-size: calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600));

package/src/components/segmentedControl/component.scss

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

package/src/components/segmentedControl/states.scss

@@ -1,9 +1,9 @@
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
 @mixin selected {
-	--components-segmentedControl-background: var(--palettes-product-50);
-	--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500);
-	--components-segmentedControl-color: var(--palettes-product-800);
+	--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));
+	--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));
+	--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));
 	--components-segmentedControl-cursor: default;
 	--components-segmentedControl-backgroundContent: none;
 	--components-segmentedControl-zIndex: 1;
@@ -12,8 +12,7 @@
 		@include numericBadge.inherit;
 
 		&.is-loading {
-			// Might be deletable after layers implementation
-			--components-numericBadge-loadingColor: var(--palettes-product-500);
+			--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));
 			--components-numericBadge-color: transparent;
 		}
 	}
@@ -29,7 +28,6 @@
 		@include numericBadge.disabled;
 
 		&.is-loading {
-			// Might be deletable after layers implementation
 			--components-numericBadge-color: transparent;
 		}
 	}

package/src/components/softwareIcon/component.scss

@@ -1,17 +1,79 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	display: inline-block;
+	display: var(--components-softwareIcon-display);
 	inline-size: var(--components-softwareIcon-size);
 	block-size: var(--components-softwareIcon-size);
+	z-index: var(--components-softwareIcon-zIndex);
+	position: relative;
+	transform: scale(var(--components-softwareIcon-transformScale));
+	transition-property: transform;
+	transition-duration: var(--commons-animations-durations-fast);
 
-	svg {
-		display: block;
-		inline-size: 100%;
-		block-size: 100%;
+	&:focus-visible {
+		outline: none;
 	}
 
 	@at-root ($atRoot) {
+		.softwareIcon-illustration {
+			overflow: visible;
+		}
 
+		.softwareIcon-illustration-bubble {
+			stroke: var(--components-softwareIcon-illustration-bubble-stroke);
+			stroke-width: var(--components-softwareIcon-illustration-bubble-strokeWidth);
+		}
+
+		.softwareIconWrapper {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: var(--pr-t-spacings-25) 0;
+			padding-inline-start: calc(var(--components-softwareIconWrapper-list-item-marginInlineStart) * -1);
+		}
+
+		.softwareIconWrapper-list {
+			@include reset.list;
+
+			display: contents;
+		}
+
+		.softwareIconWrapper-list-item {
+			margin-inline-start: var(--components-softwareIconWrapper-list-item-marginInlineStart);
+		}
+
+		.softwareIconWrapper-action {
+			@include reset.button;
+
+			border-radius: 68% 35% 45% 55% / 40% 40% 64% 60%;
+			background-color: var(--palettes-neutral-200);
+			inline-size: var(--components-softwareIcon-size);
+			block-size: var(--components-softwareIcon-size);
+			transform: scale(var(--components-softwareIcon-transformScale));
+			transition-property: transform;
+			transition-duration: var(--commons-animations-durations-fast);
+			box-shadow: 0 0 0 var(--components-softwareIcon-action-boxShadowSpread) var(--palettes-neutral-0);
+			margin-inline-start: var(--components-softwareIconWrapper-list-item-marginInlineStart);
+		}
+
+		.softwareIconWrapper-action-more {
+			display: grid;
+			place-items: center;
+			font-family: var(--pr-t-font-family-brand);
+			font-size: var(--components-softwareIconWrapper-action-more-fontSize);
+			font-weight: var(--pr-t-font-fontWeight-semibold);
+		}
+
+		.softwareIconWrapper_popover {
+			@include reset.list;
+
+			display: grid;
+			max-inline-size: calc((var(--components-softwareIcon-size) * 8) + (var(--pr-t-spacings-50) * 7));
+			box-sizing: content-box;
+			gap: var(--pr-t-spacings-50);
+			grid-template-columns: repeat(auto-fit, minmax(var(--components-softwareIcon-size), 1fr));
+		}
 	}
 }

package/src/components/softwareIcon/index.scss

@@ -28,3 +28,61 @@
 		}
 	}
 }
+
+.softwareIconWrapper {
+	@layer components {
+		@include varsWrapper;
+	}
+
+	@layer mods {
+		&.mod-XS {
+			@include wrapperXS;
+		}
+
+		&.mod-S {
+			@include wrapperS;
+		}
+
+		.softwareIcon,
+		.softwareIconWrapper-action {
+			@include insideWrapper;
+
+			&:hover,
+			&:focus {
+				@include insideWrapperHover;
+			}
+		}
+	}
+}
+
+.softwareIconWrapper_popover {
+	@layer components {
+		@include varsPopover;
+	}
+
+	@layer mods {
+		.softwareIcon,
+		.softwareIconWrapper-action {
+			@include block;
+
+			&:hover,
+			&:focus {
+				@include insideWrapperHover;
+			}
+		}
+
+		&.mod-XS {
+			&,
+			.softwareIcon {
+				@include XS;
+			}
+		}
+
+		&.mod-S {
+			&,
+			.softwareIcon {
+				@include S;
+			}
+		}
+	}
+}

package/src/components/softwareIcon/mods.scss

@@ -13,3 +13,35 @@
 @mixin L {
 	--components-softwareIcon-size: var(--pr-t-spacings-600);
 }
+
+@mixin wrapperXS {
+	--components-softwareIconWrapper-action-more-fontSize: var(--pr-t-font-fontSize-150);
+	--components-softwareIconWrapper-list-item-marginInlineStart: calc(var(--pr-t-spacings-50) * -1);
+	--components-softwareIcon-action-boxShadowSpread: 1px;
+
+	&,
+	.softwareIcon {
+		@include XS;
+	}
+}
+
+@mixin wrapperS {
+	--components-softwareIconWrapper-action-more-fontSize: var(--pr-t-font-fontSize-200);
+	--components-softwareIconWrapper-list-item-marginInlineStart: calc(var(--pr-t-spacings-50) * -1);
+
+	&,
+	.softwareIcon {
+		@include S;
+	}
+}
+
+@mixin insideWrapper {
+	--components-softwareIcon-illustration-bubble-stroke: var(--palettes-neutral-0);
+	--components-softwareIcon-illustration-bubble-strokeWidth: 4px;
+
+	@include block;
+}
+
+@mixin block {
+	--components-softwareIcon-display: block;
+}

package/src/components/softwareIcon/states.scss

@@ -6,3 +6,8 @@
 	--components-softwareIcon-disabled-500: var(--palettes-neutral-500);
 	--components-softwareIcon-disabled-600: var(--palettes-neutral-600);
 }
+
+@mixin insideWrapperHover {
+	--components-softwareIcon-transformScale: 1.1;
+	--components-softwareIcon-zIndex: 1;
+}

package/src/components/softwareIcon/vars.scss

@@ -1,3 +1,20 @@
 @mixin vars {
 	--components-softwareIcon-size: var(--pr-t-spacings-500);
+	--components-softwareIcon-illustration-bubble-stroke: transparent;
+	--components-softwareIcon-illustration-bubble-strokeWidth: 0px;
+	--components-softwareIcon-display: inline-block;
+	--components-softwareIcon-action-boxShadowSpread: 2px;
+	--components-softwareIcon-zIndex: auto;
+	--components-softwareIcon-transformScale: 1;
+}
+
+@mixin varsWrapper {
+	@include vars;
+
+	--components-softwareIconWrapper-list-item-marginInlineStart: calc(var(--pr-t-spacings-75) * -1);
+	--components-softwareIconWrapper-action-more-fontSize: var(--pr-t-font-fontSize-225);
+}
+
+@mixin varsPopover {
+	--components-softwareIcon-size: var(--pr-t-spacings-500);
 }