@lucca-front/scss 21.4.2 → 21.4.3-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.4.2",
+  "version": "21.4.3-rc.1",
   "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.4.2",
-    "@lucca/prisme": "21.4.2"
+    "@lucca-front/icons": "21.4.3-rc.1",
+    "@lucca/prisme": "21.4.3-rc.1"
   }
 }

package/src/components/appLayout/component.scss

@@ -23,8 +23,8 @@
 		.appLayout-navSide {
 			min-inline-size: 0;
 			grid-area: navSide;
-			overflow-x: var(--components-appLayout-navSide-overflowX);
-			overflow-y: var(--components-appLayout-navSide-overflowY);
+			overflow-y: var(--components-appLayout-navSide-overflowX);
+			overflow-x: var(--components-appLayout-navSide-overflowY);
 
 			&:focus-visible {
 				@include a11y.focusVisible($offset: -4px);

package/src/components/button/states.scss

@@ -21,6 +21,7 @@
 
 @mixin loading {
 	--components-button-pointerEvents: none;
+	--components-button-color: transparent;
 	--components-button-userSelect: none;
 	--components-button-boxShadow: none;
 	--components-button-backgroundColor: var(--palettes-500, var(--palettes-product-500));
@@ -28,11 +29,6 @@
 
 	@include loading.spinner(var(--pr-t-font-body-M-lineHeight));
 
-	&,
-	&:disabled {
-		--components-button-color: transparent;
-	}
-
 	.numericBadge {
 		@include numericBadge.state;
 	}

package/src/components/comment/component.scss

@@ -77,7 +77,6 @@
 			margin-block-end: 0;
 			overflow-wrap: anywhere;
 			font: var(--components-comment-text-font);
-			white-space: var(--components-comment-text-whiteSpace);
 		}
 
 		.comment-content-textContainerOptional {

package/src/components/comment/index.scss

@@ -17,10 +17,6 @@
 			@include noAvatar;
 		}
 
-		&.mod-plainText {
-			@include plainText;
-		}
-
 		&:has(.comment-infos) {
 			@include container.max(25rem, $name: 'comment') {
 				@include narrow;

package/src/components/comment/mods.scss

@@ -57,7 +57,3 @@
 		margin-inline: 0 var(--components-comment-content-margin);
 	}
 }
-
-@mixin plainText {
-	--components-comment-text-whiteSpace: pre-line;
-}

package/src/components/comment/vars.scss

@@ -1,6 +1,5 @@
 @mixin vars {
 	--components-comment-max-width: 66ch;
-	--components-comment-text-whiteSpace: normal;
 	--components-comment-text-font: var(--pr-t-font-body-M);
 	--components-comment-margin: 0;
 	--components-comment-content-margin: calc(1.5rem + var(--pr-t-spacings-100)); // 1.5rem for the width of the avatar and 0.5rem for the gap

package/src/components/dialog/component.scss

@@ -158,7 +158,6 @@
 			padding-inline: var(--components-dialog-insideContent-paddingInline);
 			grid-area: overflow;
 			overflow: var(--components-dialog-insideContent-overflow);
-			flex-grow: var(--components-dialog-insideContent-flexGrow);
 			display: block;
 			outline: none;
 		}

package/src/components/dialog/mods.scss

@@ -155,7 +155,6 @@
 
 @mixin withHorizontalNavigation {
 	--components-dialog-insideContent-overflow: none;
-	--components-dialog-insideContent-flexGrow: 1;
 	--components-dialog-inside-header-boxShadow: none;
 	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200) 0;
 }

package/src/components/dialog/vars.scss

@@ -20,7 +20,6 @@
 	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-300);
 	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-200);
 	--components-dialog-insideContent-overflow: auto;
-	--components-dialog-insideContent-flexGrow: 0;
 	--components-dialog-level: 0;
 	--components-dialog-translate-spacing: var(--pr-t-spacings-500);
 	--components-dialog-translate: calc(var(--components-dialog-translate-spacing) * var(--components-dialog-level) * -1);

package/src/components/errorPage/index.scss

@@ -16,8 +16,8 @@
 			@include narrow;
 		}
 
-		:is(.appLayout, .dialog) & {
-			@include nested;
+		.appLayout & {
+			@include inAppLayout;
 		}
 	}
 }

package/src/components/errorPage/mods.scss

@@ -26,7 +26,7 @@
 	}
 }
 
-@mixin nested {
+@mixin inAppLayout {
 	&,
 	.errorPage-section {
 		block-size: 100%;

package/src/components/filterPill/component.scss

@@ -104,18 +104,22 @@
 
 			display: flex;
 			margin-block-start: -1px;
+			margin-inline-start: var(--pr-t-spacings-50);
 			inline-size: calc(var(--pr-t-spacings-50) + var(--pr-t-spacings-200));
 			flex-shrink: 0;
 			z-index: 1;
 			color: var(--components-filterPill-toggle-iconColor);
 			cursor: var(--components-filterPill-label-cursor);
-			margin-inline-start: var(--components-filterPill-toggle-marginInlineStart);
 
 			.icon-arrowChevronBottom {
 				transition-property: transform;
 				transition-duration: var(--commons-animations-durations-fast);
 				transform: rotate(var(--components-filterPill-toggle-rotation));
 			}
+
+			.filterPill-value + & {
+				margin-inline-start: var(--components-filterPill-toggle-marginInlineStart);
+			}
 		}
 
 		.filterPill-clear.clear {

package/src/components/filterPill/index.scss

@@ -38,10 +38,6 @@
 			&:active {
 				@include filledActive;
 			}
-
-			&:has(~ .filterPill_clear) {
-				@include filledClearable;
-			}
 		}
 
 		&.mod-checkbox {
@@ -86,10 +82,6 @@
 }
 
 .filterPillWrapper {
-	@layer components {
-		@include varsWrapper;
-	}
-
 	@layer mods {
 		&.is-hidden {
 			@include hidden;

package/src/components/filterPill/states.scss

@@ -67,6 +67,7 @@
 	--components-filterPill-backgroundColor: var(--palettes-product-50);
 	--components-filterPill-color: var(--palettes-product-800);
 	--components-filterPill-toggle-iconColor: var(--palettes-product-700);
+	--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
 }
 
 @mixin notFilled {
@@ -108,7 +109,3 @@
 @mixin hidden {
 	--components-filterPillWrapper-display: none;
 }
-
-@mixin filledClearable {
-	--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
-}

package/src/components/filterPill/vars.scss

@@ -18,8 +18,5 @@
 	--components-filterPill-arrowColor: var(--palettes-product-700);
 	--components-filterPill-label-maxInlineSize: none;
 	--components-filterPill-toggle-marginInlineStart: var(--pr-t-spacings-50);
-}
-
-@mixin varsWrapper {
 	--components-filterPillWrapper-display: block;
 }

package/src/components/footer/component.scss

@@ -18,10 +18,6 @@
 	@at-root ($atRoot) {
 		.footer-content {
 			flex-grow: 1;
-
-			&:empty {
-				display: none;
-			}
 		}
 
 		.footer-actions {

package/src/components/highlightData/component.scss

@@ -55,7 +55,7 @@
 				--commons-text-link-hover: var(--palettes-800, var(--palettes-product-800));
 			}
 
-			.button.mod-outlined {
+			.button {
 				@include color.palette('neutral');
 			}
 		}

package/src/components/horizontalNavigation/component.scss

@@ -149,7 +149,6 @@
 		.horizontalNavigation_panel {
 			display: var(--components-horizontalNavigation-panel-display);
 			overflow: var(--components-horizontalNavigation-panel-overflow);
-			flex-grow: var(--components-horizontalNavigation-panel-flexGrow);
 			min-height: 0;
 			flex-direction: column;
 

package/src/components/horizontalNavigation/mods.scss

@@ -115,7 +115,6 @@
 @mixin insideDialogPanel {
 	--components-horizontalNavigation-panel-display: flex;
 	--components-horizontalNavigation-panel-overflow: auto;
-	--components-horizontalNavigation-panel-flexGrow: 1;
 
 	&:focus-visible {
 		@include a11y.focusVisible($offset: -4px, $borderRadius: var(--pr-t-border-radius-structure));

package/src/components/horizontalNavigation/vars.scss

@@ -25,5 +25,4 @@
 @mixin varsPanel {
 	--components-horizontalNavigation-panel-display: block;
 	--components-horizontalNavigation-panel-overflow: visible;
-	--components-horizontalNavigation-panel-flexGrow: 0;
 }

package/src/components/multiSelect/states.scss

@@ -12,7 +12,7 @@
 }
 
 @mixin disabled {
-	--components-multiSelect-background: var(--pr-t-color-input-background-disabled);
+	--components-multiSelect-background: var(--commons-disabled-background);
 	--components-multiSelect-placeholder: var(--commons-disabled-placeholder);
 	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);
 

package/src/components/readMore/component.scss

@@ -62,8 +62,6 @@
 			$wrappingElements: 'ol, ul';
 
 			&:not(:has(#{$notPlainText})) {
-				white-space: var(--components-readMore-content-whiteSpace);
-
 				&::after {
 					@extend %after;
 				}

package/src/components/readMore/index.scss

@@ -28,9 +28,5 @@
 		&.mod-sunken {
 			@include sunken;
 		}
-
-		&.mod-plainText {
-			@include plainText;
-		}
 	}
 }

package/src/components/readMore/mods.scss

@@ -9,7 +9,3 @@
 @mixin linkReset {
 	--components-readMore-link-insetBlockEnd: 0;
 }
-
-@mixin plainText {
-	--components-readMore-content-whiteSpace: pre-line;
-}

package/src/components/readMore/vars.scss

@@ -3,5 +3,4 @@
 	--components-readMore-link-backgroudColor: var(--pr-t-elevation-surface-raised);
 	--components-readMore-link-paddingInlineStart: var(--pr-t-spacings-500);
 	--components-readMore-link-insetBlockEnd: var(--pr-t-spacings-50);
-	--components-readMore-content-whiteSpace: normal;
 }

package/src/components/resourceCard/component.scss

@@ -22,17 +22,7 @@
 
 	@at-root ($atRoot) {
 		.resourceCardWrapper {
-			grid-template-columns:
-				repeat(
-					auto-fill,
-					minmax(
-						min(
-							var(--components-resourceCardWrapper-gridTemplateColumnsMin),
-							100%
-						),
-						1fr
-					)
-				);
+			grid-template-columns: repeat(auto-fill, minmax(var(--components-resourceCardWrapper-gridTemplateColumnsMin), 1fr));
 			display: var(--components-resourceCardWrapper-display);
 			flex-direction: column;
 			gap: var(--pr-t-spacings-100);

package/src/components/richText/vars.scss

@@ -9,6 +9,6 @@
 	// with css vars deprecated before values
 	--components-richTextField-content-resize: var(--components-richTextField-resize, vertical);
 	--components-richTextField-content-height: var(--components-richTextField-height, calc(3lh + var(--pr-t-spacings-200)));
-	--components-richTextField-content-minHeight: var(--components-richTextField-minHeight, calc(2lh + var(--pr-t-spacings-200)));
+	--components-richTextField-content-minHeight: var(--components-richTextField-minHeigh, calc(2lh + var(--pr-t-spacings-200)));
 	--components-richTextField-content-maxHeight: var(--components-richTextField-maxHeight, 90dvh);
 }

package/src/components/tableStickedDeprecated/mods.scss

@@ -190,14 +190,14 @@
 
 @mixin stickyHeaderBanner {
 	.table-head-row-cell {
-		inset-block-start: var(--commons-banner-height);
+		inset-block-start: var(commons-banner-height);
 	}
 
 	.table-body-row-cell,
 	.table-foot-row-cell {
 		inset-block-start:
 			calc(
-				var(--commons-banner-height)
+				var(commons-banner-height)
 				+ var(--sticky-header-shadow-offset-top)
 				+ var(--components-tableFixed-column-sticky-shadow-width)
 			);
@@ -206,7 +206,7 @@
 			&::after {
 				inset-block-start:
 					calc(
-						var(--commons-banner-height)
+						var(commons-banner-height)
 						+ var(--sticky-header-shadow-offset-top)
 						+ var(--components-tableFixed-column-sticky-shadow-width)
 					);

package/src/components/textField/component.scss

@@ -132,7 +132,6 @@
 
 		.textField-prefix-lang {
 			min-inline-size: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
-			padding-inline-end: var(--pr-t-spacings-100);
 			position: relative;
 
 			&::after {

package/src/components/timepicker/component.scss

@@ -50,15 +50,15 @@
 		}
 
 		.timePicker-fieldset-groupSeparator {
+			pointer-events: none;
 			display: grid;
 			place-items: center;
 			text-align: center;
-			inline-size: fit-content;
-			block-size: calc(var(--components-timepicker-input-height) + var(--components-timepicker-input-padding-block) * 2);
-			margin-inline: calc(var(--pr-t-spacings-25) * -1);
+			inline-size: var(--pr-t-spacings-200);
+			margin-block: 0;
+			margin-inline: calc(var(--pr-t-spacings-100) * -1);
 			position: relative;
 			inset-inline-start: calc(var(--pr-t-spacings-25) * -1);
-			z-index: 1;
 		}
 
 		.timePicker-fieldset-group {

package/src/components/tooltip/component.scss

@@ -26,7 +26,7 @@
 
 	@at-root ($atRoot) {
 		// Prevent Safari to display a native tooltip
-		.tooltip_trigger.is-whenEllipsis {
+		[luTooltipWhenEllipsis] {
 			@supports (background-image: -webkit-named-image(i)) {
 				@media (hover: hover) {
 					&::after {