@lucca-front/scss 21.0.3 → 21.1.0-split.0

package/src/components/dialog/vars.scss

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

package/src/components/emptyState/component.scss

@@ -18,12 +18,7 @@
 			inset-inline-start: var(--components-emptyState-container-left);
 			padding: 0;
 			inline-size: 100%;
-			position: sticky;
-
-			.container & {
-				--components-emptyState-container-maxWidth: none;
-				--components-emptyState-container-left: auto;
-			}
+			position: var(--components-emptyState-container-position);
 		}
 
 		.emptyState-content {

package/src/components/emptyState/index.scss

@@ -14,5 +14,15 @@
 		&.mod-center {
 			@include center;
 		}
+
+		.table &,
+		.indexTable &,
+		.dataTable & {
+			@include insideTable;
+		}
+
+		.container & {
+			@include insideContainer;
+		}
 	}
 }

package/src/components/emptyState/mods.scss

@@ -55,3 +55,12 @@
 		justify-content: center;
 	}
 }
+
+@mixin insideTable {
+	--components-emptyState-container-position: sticky;
+}
+
+@mixin insideContainer {
+	--components-emptyState-container-maxWidth: none;
+	--components-emptyState-container-left: auto;
+}

package/src/components/emptyState/vars.scss

@@ -1,6 +1,7 @@
 @mixin vars {
 	--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);
-	--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);
+	--components-emptyState-container-left: calc(var(--commons-navSide-width) + var(--pr-t-spacings-400));
+	--components-emptyState-container-position: static;
 
 	--components-emptyState-background-color: var(--pr-t-elevation-surface-default);
 	--components-emptyState-illustration-top-right-offset-left: min(

package/src/components/errorPage/component.scss

@@ -1,50 +1,66 @@
-@use '@lucca-front/scss/src/commons/utils/namespace';
-
-@mixin component($atRoot: namespace.$defaultAtRoot) {
+@mixin component {
 	background-color: var(--components-errorPage-background);
 	block-size: 100vh;
 	inline-size: 100vw;
 	line-height: 1.2;
 	overflow: hidden;
 
-	@at-root ($atRoot) {
-		.errorPage-section {
-			block-size: 100%;
-			max-inline-size: 1200px;
-			padding-block: 0;
-			padding-inline: var(--pr-t-spacings-400);
-			inline-size: 100vw;
-			margin-block: 0;
-			margin-inline: auto;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-		}
-
-		.errorPage-section-info {
-			margin-block-start: 10vh;
-			max-inline-size: 90vw;
-			inline-size: 450px;
-			padding-inline-end: var(--pr-t-spacings-400);
-		}
-
-		.errorPage-section-info-title {
-			font: var(--pr-t-font-heading-1);
-			margin-block-end: var(--pr-t-spacings-50);
-		}
-
-		.errorPage-section-info-text {
-			font-size: var(--pr-t-font-body-1-fontSize);
-			line-height: var(--pr-t-font-body-1-lineHeight);
-			margin-block-end: var(--pr-t-spacings-150);
-		}
-
-		.errorPage-section-image {
-			margin-block-start: 10vh;
-			inline-size: 50%;
-			max-inline-size: 580px;
-			min-inline-size: 350px;
-			block-size: auto;
-		}
+	.errorPage-section {
+		block-size: 100%;
+		max-inline-size: 1200px;
+		padding-block: 0;
+		padding-inline: var(--pr-t-spacings-400);
+		inline-size: 100vw;
+		margin-block: 0;
+		margin-inline: auto;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.errorPage-section-info {
+		margin-block-start: 10vh;
+		max-inline-size: 90vw;
+		inline-size: 450px;
+		padding-inline-end: var(--pr-t-spacings-400);
+	}
+
+	.errorPage-section-info-title {
+		font: var(--pr-t-font-heading-1);
+		margin-block-end: var(--pr-t-spacings-50);
+	}
+
+	.errorPage-section-info-text {
+		font-size: var(--pr-t-font-body-1-fontSize);
+		line-height: var(--pr-t-font-body-1-lineHeight);
+		margin-block-end: var(--pr-t-spacings-150);
+	}
+
+	.errorPage-section-image {
+		margin-block-start: 10vh;
+		inline-size: 50%;
+		max-inline-size: 580px;
+		min-inline-size: 350px;
+		block-size: auto;
+	}
+}
+
+@mixin compact {
+	overflow-y: auto;
+
+	.errorPage-section {
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.errorPage-section-info {
+		margin-block: var(--pr-t-spacings-400);
+		order: 1;
+		padding: 0;
+	}
+
+	.errorPage-section-image {
+		margin-block-start: var(--pr-t-spacings-400);
+		order: 0;
 	}
 }

package/src/components/errorPage/index.scss

@@ -11,9 +11,5 @@
 		@include media.max('S') {
 			@include compact;
 		}
-
-		.appLayout & {
-			@include inAppLayout;
-		}
 	}
 }

package/src/components/errorPage/mods.scss

@@ -1,38 +0,0 @@
-@mixin compact {
-	overflow-y: auto;
-
-	.errorPage-section {
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	.errorPage-section-info {
-		margin-block: var(--pr-t-spacings-400);
-		order: 1;
-		padding: 0;
-	}
-
-	.errorPage-section-image {
-		margin-block-start: var(--pr-t-spacings-400);
-		order: 0;
-	}
-}
-
-@mixin inAppLayout {
-	&,
-	.errorPage-section {
-		block-size: 100%;
-		inline-size: 100%;
-	}
-
-	.errorPage-section {
-		gap: var(--pr-t-spacings-400);
-	}
-
-	.errorPage-section-image,
-	.errorPage-section-info {
-		margin-block-start: 0;
-		padding: 0;
-		max-inline-size: 100%;
-	}
-}

package/src/components/fieldset/component.scss

@@ -17,10 +17,6 @@
 			inline-size: 100%;
 			min-block-size: var(--pr-t-spacings-300);
 			display: contents;
-
-			&:has(.fieldset-title-content-text:empty) {
-				display: none;
-			}
 		}
 
 		.fieldset-title-content {

package/src/components/filterPill/component.scss

@@ -40,18 +40,7 @@
 
 		.filterPill_popover-content-option {
 			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
-			border-radius: var(--pr-t-border-radius-default);
-			position: relative;
-
-			.formLabel {
-				position: static;
-
-				&::before {
-					content: '';
-					position: absolute;
-					inset: 0;
-				}
-			}
+			border-radius: var(--pr-t-border-radius-50);
 
 			&:hover {
 				background-color: var(--palettes-neutral-50);

package/src/components/form/component.scss

@@ -6,7 +6,7 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: block;
 
-	.divider:not(.mod-vertical) {
+	.divider {
 		margin-block: var(--pr-t-spacings-300);
 	}
 

package/src/components/form/index.scss

@@ -101,6 +101,12 @@
 				@include withArrowS;
 			}
 		}
+
+		&:has(.formLabel.pr-u-mask) {
+			&:not(:has(.inlineMessage)) {
+				@include hiddenLabel;
+			}
+		}
 	}
 }
 

package/src/components/form/mods.scss

@@ -12,6 +12,7 @@
 @use '@lucca-front/scss/src/components/multiSelect/exports' as multiSelect;
 @use '@lucca-front/scss/src/components/timepicker/exports' as timepicker;
 @use '@lucca-front/scss/src/components/box/exports' as box;
+@use '@lucca-front/scss/src/components/color/exports' as color;
 
 @mixin maxWidth {
 	max-inline-size: var(--components-form-maxWidth);
@@ -115,6 +116,10 @@
 	.timePicker {
 		@include timepicker.S;
 	}
+
+	.color {
+		@include color.M;
+	}
 }
 
 @mixin XS {
@@ -369,3 +374,7 @@
 		content: '*' / '';
 	}
 }
+
+@mixin hiddenLabel {
+	gap: 0;
+}

package/src/components/highlightData/component.scss

@@ -35,7 +35,6 @@
 		}
 
 		.highlightData-content-subText {
-			grid-area: subtext;
 			font: var(--pr-t-font-body-XS);
 			color: var(--pr-t-color-text-subtle);
 			margin-block-start: var(--pr-t-spacings-100) !important; // Override list reset

package/src/components/highlightData/mods.scss

@@ -7,9 +7,8 @@
 }
 
 @mixin valueFirst {
-	--components-highlightData-grid : 'value   action'
-	                                  'title   action'
-																		'subtext action';
+	--components-highlightData-grid : 'value action'
+	                                  'title action';
 }
 
 @mixin valueFirstIllustrations {

package/src/components/highlightData/vars.scss

@@ -1,8 +1,7 @@
 @mixin vars {
 	--components-highlightData-display: grid;
-	--components-highlightData-grid: 'title   action'
-																		'value   action'
-																		'subtext action';
+	--components-highlightData-grid: 'title action'
+	                                 'value action';
 	--components-highlightData-alignItem: center;
 	--components-highlightData-background: var(--pr-t-elevation-surface-raised);
 	--components-highlightData-padding-inline: var(--pr-t-spacings-200);

package/src/components/horizontalNavigation/component.scss

@@ -32,7 +32,7 @@
 		.horizontalNavigation-containerOptional,
 		.menu-containerOptional {
 			max-inline-size: var(--commons-container-maxWidth);
-			padding-inline: var(--commons-container-padding);
+			padding: var(--commons-container-padding);
 		}
 
 		// .menu-list is deprecated

package/src/components/index.scss

@@ -110,6 +110,9 @@
 @forward 'listboxOption';
 @forward 'suggestion';
 @forward 'resourceCard';
+@forward 'color';
+@forward 'bubbleIllustration';
+@forward 'bubbleIcon';
 
 @forward 'filterBarDeprecated';
 @forward 'tableFixedDeprecated';

package/src/components/inputFramed/component.scss

@@ -13,12 +13,18 @@
 	display: flex;
 	flex-direction: column;
 
-	.formLabel-info {
-		position: relative;
-		z-index: 1;
-	}
-
 	@at-root ($atRoot) {
+		.inputFramed-header-label.formLabel {
+			position: static;
+			font-weight: var(--components-inputFramed-header-label-fontWeight);
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset: calc(var(--pr-t-spacings-50) * -1);
+			}
+		}
+
 		.inputFramed-header-field {
 			flex: 1;
 
@@ -42,17 +48,6 @@
 			align-content: flex-start;
 			gap: var(--pr-t-spacings-100);
 			align-items: var(--components-inputFramed-header-alignItems);
-
-			.inputFramed-header-label.formLabel {
-				position: static;
-				font-weight: var(--components-inputFramed-header-label-fontWeight);
-
-				&::after {
-					content: '';
-					position: absolute;
-					inset: calc(var(--pr-t-spacings-50) * -1);
-				}
-			}
 		}
 
 		.inputFramed-header-illustration {

package/src/components/mainLayout/component.scss

@@ -75,11 +75,11 @@
 				--components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-300);
 			}
 
-			&:not(& + &) {
+			&:first-of-type {
 				margin-block-start: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
 			}
 
-			&:not(:has(+ &)) {
+			&:last-of-type {
 				margin-block-end: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
 			}
 
@@ -95,6 +95,7 @@
 			z-index: 1;
 			inset-block-start: var(--components-mainLayout-content-inside-header-insetBlockStart);
 			inset-inline-start: 0;
+			background-color: var(--components-mainLayout-content-inside-header-backgroundColor);
 
 			&:empty {
 				display: none;
@@ -106,6 +107,7 @@
 			inset-block-end: var(--components-mainLayout-content-inside-footer-insetBlockEnd);
 			inset-inline-start: 0;
 			margin-block-start: auto;
+			background-color: var(--components-mainLayout-content-inside-footer-backgroundColor);
 
 			&:empty {
 				display: none;

package/src/components/mainLayout/mods.scss

@@ -4,10 +4,12 @@
 
 @mixin stickyHeader {
 	--components-mainLayout-content-inside-header-position: sticky;
+	--components-mainLayout-content-inside-header-backgroundColor: var(--commons-background-base);
 }
 
 @mixin stickyFooter {
 	--components-mainLayout-content-inside-footer-position: sticky;
+	--components-mainLayout-content-inside-footer-backgroundColor: var(--commons-background-base);
 }
 
 @mixin stickyBlock {

package/src/components/mainLayout/vars.scss

@@ -7,4 +7,6 @@
 	--components-mainLayout-content-inside-header-insetBlockStart: auto;
 	--components-mainLayout-content-inside-footer-insetBlockEnd: auto;
 	--components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-200);
+	--components-mainLayout-content-inside-header-backgroundColor: transparent;
+	--components-mainLayout-content-inside-footer-backgroundColor: transparent;
 }

package/src/components/multiSelect/mods.scss

@@ -61,7 +61,7 @@
 		border-radius: 0;
 		background-color: transparent;
 		padding: var(--pr-t-spacings-50);
-		margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
+		margin: var(--pr-t-spacings-50) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
 
 		lu-simple-select-default-option.pr-u-ellipsis {
 			white-space: normal !important;

package/src/components/navside/component.scss

@@ -116,10 +116,6 @@
 			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
-		.navSide-item-link-title {
-			overflow-wrap: anywhere;
-		}
-
 		.navSide-item-link-badgesOptional {
 			display: flex;
 			column-gap: var(--pr-t-spacings-150);

package/src/components/resourceCard/mods.scss

@@ -1,6 +1,8 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
+@use '@lucca-front/scss/src/components/bubbleIllustration/exports' as bubbleIllustration;
+@use '@lucca-front/scss/src/components/bubbleIcon/exports' as bubbleIcon;
 
 @mixin gridWrapper {
 	--components-resourceCardWrapper-display: grid;
@@ -23,6 +25,14 @@
 	--components-resourceCard-layout-content-font: var(--pr-t-font-body-S);
 	--components-resourceCard-layout-header-title-font: var(--pr-t-font-heading-4);
 	--components-resourceCard-layout-before-illustration-minSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
+
+	.bubbleIllustration {
+		@include bubbleIllustration.S;
+  }
+  
+	.bubbleIcon {
+		@include bubbleIcon.S;
+	}
 }
 
 @mixin hasIllustrationGridS {

package/src/components/resourceCard/states.scss

@@ -20,6 +20,16 @@
 	--components-resourceCard-color: var(--palettes-neutral-500);
 	--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);
+	}
 }
 
 @mixin active {

package/src/components/simpleSelect/mods.scss

@@ -62,6 +62,6 @@
 		border-radius: 0;
 		background-color: transparent;
 		padding: var(--pr-t-spacings-50);
-		margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
+		margin: var(--pr-t-spacings-50) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
 	}
 }