@lucca-front/scss 21.1.0-rc.2 → 21.1.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.1.0-rc.2",
+  "version": "21.1.0-rc.3",
   "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.1.0-rc.2",
-    "@lucca/prisme": "21.1.0-rc.2"
+    "@lucca-front/icons": "21.1.0-rc.3",
+    "@lucca/prisme": "21.1.0-rc.3"
   }
 }

package/src/components/appLayout/component.scss

@@ -19,6 +19,7 @@
 		}
 
 		.appLayout-navSide {
+			min-inline-size: 0;
 			grid-area: navSide;
 			overflow-y: var(--components-appLayout-navSide-overflowX);
 			overflow-x: var(--components-appLayout-navSide-overflowY);

package/src/components/appLayout/index.scss

@@ -17,5 +17,10 @@
 				@include mobileNavSideBottom;
 			}
 		}
+
+		&:has(.appLayout-banner:empty),
+		&:not(:has(.appLayout-banner)) {
+			@include withNoBanner;
+		}
 	}
 }

package/src/components/appLayout/mods.scss

@@ -13,3 +13,7 @@
 	--components-appLayout-navSide-overflowX: visible;
 	--components-appLayout-navSide-overflowY: visible;
 }
+
+@mixin withNoBanner {
+	--commons-banner-height: 0px;
+}

package/src/components/bubbleIcon/vars.scss

@@ -1,6 +1,6 @@
 @mixin vars {
 	--components-bubbleIcon-size: var(--pr-t-spacings-500);
-	--components-bubbleIcon-color: var(--palettes-600, var(--palettes-product-600));
+	--components-bubbleIcon-color: var(--palettes-700, var(--palettes-product-700));
 	--components-bubbleIcon-bubble-path-fill: var(--palettes-100, var(--palettes-product-100));
 	--components-bubbleIcon-bubble-pathBlock-display: none;
 	--components-bubbleIcon-bubble-pathInline-display: inherit;

package/src/components/callout/component.scss

@@ -45,7 +45,6 @@
 			justify-content: space-between;
 			gap: var(--pr-t-spacings-150);
 			align-items: flex-start;
-
 		}
 
 		.callout-content-description-actions {

package/src/components/clear/index.scss

@@ -25,8 +25,7 @@
 		.filterPill[disabled] &,
 		.filterPill:not(.is-filled) &,
 		.textfield-input[disabled] &,
-		.textfield-input:not(.is-filled) &,
-		.textfield-input:not(.is-selected) & {
+		.textfield-input:not(.is-filled) & {
 			@include hidden;
 		}
 

package/src/components/dialog/index.scss

@@ -61,6 +61,10 @@
 			@include withCloseButton;
 		}
 
+		&:has(.dialog-inside-header-actionOptional:not(:empty)) {
+			@include withAction;
+		}
+
 		&.mod-stacked {
 			@include stacked;
 		}

package/src/components/dialog/mods.scss

@@ -90,6 +90,10 @@
 	}
 }
 
+@mixin withAction {
+	--components-dialog-insideHeaderAreas: 'container action close';
+}
+
 @mixin stacked {
 
 }

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 action close';
+	--components-dialog-insideHeaderAreas: 'container close';
 	--components-dialog-insideHeaderTitleAlign: left;
 	--components-dialog-insideHeaderTitlePadding: calc(var(--pr-t-spacings-50) / 2) 0;
 	--components-dialog-insideHeaderButtonDisplay: flex;

package/src/components/errorPage/component.scss

@@ -1,66 +1,50 @@
-@mixin component {
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--components-errorPage-background);
 	block-size: 100vh;
 	inline-size: 100vw;
 	line-height: 1.2;
 	overflow: hidden;
 
-	.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;
+	@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;
+		}
 	}
 }

package/src/components/errorPage/index.scss

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

package/src/components/errorPage/mods.scss

@@ -0,0 +1,38 @@
+@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,6 +17,10 @@
 			inline-size: 100%;
 			min-block-size: var(--pr-t-spacings-300);
 			display: contents;
+
+			&:has(.fieldset-title-content-text:empty) {
+				display: none;
+			}
 		}
 
 		.fieldset-title-content {
@@ -27,6 +31,7 @@
 			background-color: transparent;
 			text-align: start;
 			display: flex;
+			flex-wrap: var(--components-fieldset-title-content-flexWrap);
 			align-items: flex-start;
 			justify-content: space-between;
 			gap: var(--components-fieldset-gap);

package/src/components/fieldset/index.scss

@@ -1,3 +1,5 @@
+@use '@lucca-front/scss/src/commons/utils/media';
+
 @use 'exports' as *;
 
 .fieldset {
@@ -26,5 +28,10 @@
 		&:has(.fieldset-title-content-action:not(:empty)) {
 			@include withAction;
 		}
+
+
+		@include media.max('XXS') {
+			@include narrow;
+		}
 	}
 }

package/src/components/fieldset/mods.scss

@@ -29,3 +29,7 @@
 		}
 	}
 }
+
+@mixin narrow {
+	--components-fieldset-title-content-flexWrap: wrap;
+}

package/src/components/fieldset/vars.scss

@@ -3,4 +3,5 @@
 	--components-fieldset-gap: var(--pr-t-spacings-100);
 	--components-fieldset-contentMaxWidth: 40rem;
 	--components-fieldset-title-iconRotation: 0deg;
+	--components-fieldset-title-content-flexWrap: nowrap;
 }

package/src/components/filterPill/component.scss

@@ -40,7 +40,18 @@
 
 		.filterPill_popover-content-option {
 			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
-			border-radius: var(--pr-t-border-radius-50);
+			border-radius: var(--pr-t-border-radius-default);
+			position: relative;
+
+			.formLabel {
+				position: static;
+
+				&::before {
+					content: '';
+					position: absolute;
+					inset: 0;
+				}
+			}
 
 			&: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 {
+	.divider:not(.mod-vertical) {
 		margin-block: var(--pr-t-spacings-300);
 	}
 

package/src/components/form/index.scss

@@ -102,9 +102,12 @@
 			}
 		}
 
-		&:has(.formLabel.pr-u-mask) {
-			&:not(:has(.inlineMessage)) {
-				@include hiddenLabel;
+		// no gap for checkboxes in tables in particular
+		&:has(.checkboxField-input) {
+			&:has(.formLabel.pr-u-mask) {
+				&:not(:has(.inlineMessage)) {
+					@include hiddenLabel;
+				}
 			}
 		}
 	}

package/src/components/highlightData/component.scss

@@ -35,6 +35,7 @@
 		}
 
 		.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,8 +7,9 @@
 }
 
 @mixin valueFirst {
-	--components-highlightData-grid : 'value action'
-	                                  'title action';
+	--components-highlightData-grid : 'value   action'
+	                                  'title   action'
+																		'subtext action';
 }
 
 @mixin valueFirstIllustrations {

package/src/components/highlightData/vars.scss

@@ -1,7 +1,8 @@
 @mixin vars {
 	--components-highlightData-display: grid;
-	--components-highlightData-grid: 'title action'
-	                                 'value action';
+	--components-highlightData-grid: 'title   action'
+																		'value   action'
+																		'subtext 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/index.scss

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

package/src/components/inputFramed/component.scss

@@ -13,18 +13,12 @@
 	display: flex;
 	flex-direction: column;
 
-	@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);
-			}
-		}
+	.formLabel-info {
+		position: relative;
+		z-index: 1;
+	}
 
+	@at-root ($atRoot) {
 		.inputFramed-header-field {
 			flex: 1;
 
@@ -48,6 +42,17 @@
 			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);
 			}
 
-			&:first-of-type {
+			&:not(& + &) {
 				margin-block-start: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
 			}
 
-			&:last-of-type {
+			&:not(:has(+ &)) {
 				margin-block-end: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
 			}
 

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-50) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
+		margin: var(--pr-t-spacings-75) 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,6 +116,10 @@
 			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/presentation/component.scss

@@ -0,0 +1,53 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	@at-root ($atRoot) {
+		.presentation-description {
+			margin: 0;
+		}
+
+		.presentation-description-term {
+			font: var(--pr-t-font-body-S);
+			color: var(--pr-t-color-text-subtle);
+			display: flex;
+			align-items: center;
+		}
+
+		.presentation-description-term-info {
+			position: relative;
+
+			.lucca-icon {
+				color: inherit;
+				font-size: inherit;
+				line-height: inherit;
+				margin-inline-start: var(--pr-t-spacings-25);
+				position: relative;
+				inset-block-end: 1px;
+			}
+
+			&:focus-visible {
+				outline: none;
+
+				.lucca-icon {
+					&::after {
+						content: '';
+						position: absolute;
+						inline-size: 0.875rem;
+						block-size: 0.875rem;
+						border-radius: 50%;
+						inset-block-end: var(--pr-t-spacings-25);
+						inset-inline-end: 0;
+
+						@include a11y.focusVisible($offset: 0);
+					}
+				}
+			}
+		}
+
+		.presentation-description-definition {
+			display: var(--components-presentation-description-definition-display);
+			margin: 0;
+		}
+	}
+}

package/src/components/presentation/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/presentation/index.scss

@@ -0,0 +1,12 @@
+@use 'exports' as *;
+
+.presentation {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+
+	}
+}

package/src/components/presentation/vars.scss

@@ -0,0 +1,4 @@
+@mixin vars {
+	--components-presentation-description-child-display: block;
+	--components-presentation-description-term-display: var(--components-presentation-description-child-display);
+}

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-50) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
+		margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
 	}
 }

package/src/components/softwareIcon/component.scss

@@ -0,0 +1,18 @@
+
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: inline-block;
+	inline-size: var(--components-softwareIcon-size);
+	block-size: var(--components-softwareIcon-size);
+
+	svg {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	@at-root ($atRoot) {
+
+	}
+}

package/src/components/softwareIcon/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/softwareIcon/index.scss

@@ -0,0 +1,30 @@
+@use 'exports' as *;
+
+.softwareIcon {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&.mod-XXS {
+			@include XXS;
+		}
+
+		&.mod-XS {
+			@include XS;
+		}
+
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-L {
+			@include L;
+		}
+
+		&.is-disabled {
+			@include disabled;
+		}
+	}
+}

package/src/components/softwareIcon/mods.scss

@@ -0,0 +1,15 @@
+@mixin XXS {
+	--components-softwareIcon-size: var(--pr-t-spacings-200);
+}
+
+@mixin XS {
+	--components-softwareIcon-size: var(--pr-t-spacings-300);
+}
+
+@mixin S {
+	--components-softwareIcon-size: var(--pr-t-spacings-400);
+}
+
+@mixin L {
+	--components-softwareIcon-size: var(--pr-t-spacings-600);
+}