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

package/package.json

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

package/src/commons/core.scss

@@ -34,9 +34,15 @@ $cursor: 'pointer', 'auto', 'default', 'text';
 // Tokens
 
 @mixin spacing($boxModel, $boxDirection, $key, $value, $suffix: '!important') {
+	$boxDirectionString: '-';
+
+	@if $boxDirection == '' {
+		$boxDirectionString: '';
+	}
+
 	@if $boxModel != 'inset' or ($boxDirection != 'top' and $boxDirection != 'bottom' and $boxDirection != 'left' and $boxDirection != 'right') {
 		.pr-u-#{transform.camelize($boxModel)}#{transform.capitalize(transform.camelize($boxDirection))}#{transform.capitalize($key)} {
-			#{$boxModel}#{if($boxDirection == '', '', '-')}#{$boxDirection}: var(--pr-t-spacings-#{$key}) #{$suffix};
+			#{$boxModel}#{$boxDirectionString}#{$boxDirection}: var(--pr-t-spacings-#{$key}) #{$suffix};
 		}
 	}
 }
@@ -75,31 +81,43 @@ $cursor: 'pointer', 'auto', 'default', 'text';
 
 @mixin cssvars($name, $properties, $after: '') {
 	@each $key, $value in $properties {
-		--#{$name}#{if($key == '', '', '-')}#{$key}#{$after}: #{$value};
+		$keyString: '-';
+
+		@if $key == '' {
+			$keyString: '';
+		}
+
+		--#{$name}#{$keyString}#{$key}#{$after}: #{$value};
 	}
 }
 
 @mixin classes($name, $properties, $suffix: '!important', $prefix: '') {
 	@each $property in $properties {
+		$minusString: '';
+
+		@if string.slice($property, 1, 1) == '-' {
+			$minusString: 'Minus';
+		}
+
 		@if $prefix == '' {
-			.pr-u-#{transform.camelize($name)}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
+			.pr-u-#{transform.camelize($name)}#{$minusString}#{transform.capitalize(transform.camelize($property))} {
 				#{$name}: #{transform.replace($property, '\\', '')} #{$suffix};
 			}
 
 			// Deprecated .u- utilities
 			@if config.$deprecatedUtilityPrefix {
-				.u-#{transform.camelize($name)}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
+				.u-#{transform.camelize($name)}#{$minusString}#{transform.capitalize(transform.camelize($property))} {
 					#{$name}: #{transform.replace($property, '\\', '')} #{$suffix};
 				}
 			}
 		} @else {
-			.pr-u-#{$prefix}#{transform.capitalize(transform.camelize($name))}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
+			.pr-u-#{$prefix}#{transform.capitalize(transform.camelize($name))}#{$minusString}#{transform.capitalize(transform.camelize($property))} {
 				#{$name}: #{transform.replace($property, '\\', '')} #{$suffix};
 			}
 
 			// Deprecated .u- utilities
 			@if config.$deprecatedUtilityPrefix {
-				.u-#{$prefix}#{transform.capitalize(transform.camelize($name))}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
+				.u-#{$prefix}#{transform.capitalize(transform.camelize($name))}#{$minusString}#{transform.capitalize(transform.camelize($property))} {
 					#{$name}: #{transform.replace($property, '\\', '')} #{$suffix};
 				}
 			}

package/src/commons/utils/media.scss

@@ -126,8 +126,19 @@
 }
 
 @mixin pointer($query, $any: false, $reversed: false) {
+$mediaString: 'media';
+$anyString: '';
+
+@if $reversed {
+	$mediaString: 'media not';
+}
+
+@if $any {
+	$anyString: 'any-';
+}
+
 	// stylelint-disable-next-line scss/at-rule-no-unknown
-	@#{if($reversed, 'media not', 'media')} (#{if($any, 'any-', '')}pointer: #{$query}) {
+	@#{$mediaString} (#{$anyString}pointer: #{$query}) {
 		@content;
 	}
 }

package/src/components/_sample/index.scss

@@ -20,6 +20,4 @@
 			@include sampleStateA;
 		}
 	}
-
-	color: blue;
 }

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/dataTable/index.scss

@@ -36,7 +36,7 @@
 		}
 
 		&.mod-verticalAlignMiddle {
-			@includeverticalAlignMiddle;
+			@include verticalAlignMiddle;
 		}
 
 		&.mod-layoutFixed {

package/src/components/dialog/component.scss

@@ -15,7 +15,7 @@
 	box-shadow: var(--pr-t-elevation-shadow-overlay);
 	margin: auto;
 	flex-direction: column;
-	display: flex !important;
+	display: flex;
 	position: fixed !important;
 	max-inline-size: var(--components-dialog-maxWidth) !important;
 	max-block-size: var(--components-dialog-maxHeight) !important;

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,11 @@
 	}
 }
 
+@mixin withAction {
+	--components-dialog-insideHeaderAreas: 'container action close';
+	--components-dialog-insideHeaderColumns: 1fr auto auto;
+}
+
 @mixin stacked {
 
 }

package/src/components/dialog/vars.scss

@@ -8,12 +8,12 @@
 	--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;
 	--components-dialog-insideHeaderLinkDisplay: none;
-	--components-dialog-insideHeaderColumns: 1fr auto auto;
+	--components-dialog-insideHeaderColumns: 1fr auto;
 	--components-dialog-insideContent-background: transparent;
 	--components-dialog-level: 0;
 	--components-dialog-translate-spacing: var(--pr-t-spacings-500);

package/src/components/dropdown/index.scss

@@ -13,14 +13,14 @@
 .dropdown-list-option-action,
 .lu-dropdown-options-item-action {
 	@layer mods {
-		&[disabled],
-		&.is-disabled {
-			@include disabled;
-		}
-
 		&.mod-critical,
 		&.mod-delete {
 			@include critical;
 		}
+
+		&[disabled],
+		&.is-disabled {
+			@include disabled;
+		}
 	}
 }

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

@@ -32,9 +32,11 @@
 			grid-area: value;
 			font: var(--components-highlightData-value-font);
 			order: var(--components-highlightData-value-order);
+			color: var(--pr-t-color-text-heading);
 		}
 
 		.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(--pr-t-font-fontWeight-semibold);
+
+				&::after {
+					content: '';
+					position: absolute;
+					inset: calc(var(--pr-t-spacings-50) * -1);
+				}
+			}
 		}
 
 		.inputFramed-header-illustration {

package/src/components/inputFramed/mods.scss

@@ -3,7 +3,6 @@
 }
 
 @mixin L {
-	--components-inputFramed-header-label-fontWeight: var(--pr-t-font-fontWeight-semibold);
 	--components-inputFramed-padding: var(--pr-t-spacings-50);
 	--components-inputFramed-header-padding: var(--pr-t-spacings-150);
 	--components-inputFramed-content-padding: var(--pr-t-spacings-150);

package/src/components/inputFramed/vars.scss

@@ -9,7 +9,6 @@
 	--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);
 	--components-inputFramed-header-backgroundColor: transparent;
 	--components-inputFramed-header-alignItems: normal;
-	--components-inputFramed-header-label-fontWeight: var(--pr-t-font-fontWeight-regular);
 	--components-inputFramed-header-info-color: inherit;
 	--components-inputFramed-header-info-marginBlockStart: 0;
 	--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);

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);