@lucca-front/scss 21.2.0-rc.5 → 21.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.2.0-rc.5",
+  "version": "21.2.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.2.0-rc.5",
-    "@lucca/prisme": "21.2.0-rc.5"
+    "@lucca-front/icons": "21.2.0",
+    "@lucca/prisme": "21.2.0"
   }
 }

package/src/commons/base.scss

@@ -10,7 +10,7 @@
 	color: var(--pr-t-color-text);
 	font: var(--pr-t-font-body-M);
 	text-rendering: geometricPrecision;
-	width: calc(100% - var(--commons-pushPanel-width));
+	inline-size: calc(100% - var(--commons-pushPanel-inlineSize));
 
 	@supports (-webkit-touch-callout: none) {
 		min-block-size: -webkit-fill-available;

package/src/commons/vars.scss

@@ -88,7 +88,7 @@
 	--commons-divider-border: var(--commons-divider-width) var(--commons-divider-style) var(--commons-divider-color);
 	--commons-border-100: var(--palettes-neutral-100);
 	--commons-border-200: var(--palettes-neutral-200);
-	--commons-pushPanel-width: 0px;
+	--commons-pushPanel-inlineSize: 0px;
 
 	// Deprecated
 	--commons-font-family: '#{config.$fontFamily}', Tahoma, sans-serif;

package/src/components/button/index.scss

@@ -185,14 +185,6 @@
 			&.mod-ghost {
 				@include successGhost;
 			}
-
-			&.mod-S {
-				@include successS;
-			}
-
-			&.mod-XS {
-				@include successXS;
-			}
 		}
 
 		// .disabled is deprecated

package/src/components/button/mods.scss

@@ -36,6 +36,12 @@
 	// Deprecated
 	--components-button-font-size: var(--pr-t-font-body-S-fontSize);
 	--components-button-line-height: var(--pr-t-font-body-S-lineHeight);
+
+	// status icon
+	&::after {
+		font-size: var(--pr-t-font-body-S-lineHeight);
+		block-size: var(--pr-t-font-body-S-lineHeight);
+	}
 }
 
 @mixin XS {
@@ -54,6 +60,12 @@
 	// Deprecated
 	--components-button-font-size: var(--pr-t-font-body-XS-fontSize);
 	--components-button-line-height: var(--pr-t-font-body-XS-lineHeight);
+
+	// status icon
+	&::after {
+		font-size: var(--pr-t-font-body-XS-lineHeight);
+		block-size: var(--pr-t-font-body-XS-lineHeight);
+	}
 }
 
 @mixin onlyIcon {
@@ -248,7 +260,7 @@
 	}
 
 	&[aria-expanded='true'] {
-		--components-button-arrow-transform: rotate(-180deg);
+		--components-button-arrow-transform: rotate(180deg);
 	}
 }
 
@@ -282,7 +294,7 @@
 
 	background-image:
 		linear-gradient(
-			-135deg,
+			225deg,
 			color-mix(in srgb, var(--palettes-AI-500) var(--components-button-AI-background-opacity), transparent),
 			color-mix(in srgb, var(--palettes-brand-400) var(--components-button-AI-background-opacity), transparent)
 		);

package/src/components/button/states.scss

@@ -111,20 +111,6 @@
 	}
 }
 
-@mixin successS {
-	&::after {
-		font-size: var(--pr-t-font-body-S-lineHeight);
-		block-size: var(--pr-t-font-body-S-lineHeight);
-	}
-}
-
-@mixin successXS {
-	&::after {
-		font-size: var(--pr-t-font-body-XS-lineHeight);
-		block-size: var(--pr-t-font-body-XS-lineHeight);
-	}
-}
-
 @mixin successOutlined {
 	--components-button-backgroundColor: var(--palettes-neutral-0);
 	--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);

package/src/components/callout/component.scss

@@ -1,8 +1,6 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/a11y';
-@use '@lucca-front/scss/src/commons/utils/color';
-@use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
@@ -53,11 +51,6 @@
 			margin-block-start: var(--components-callout-content-description-action-marginBlockStart);
 			padding-block: var(--components-callout-content-description-action-paddingBlock);
 			padding-inline: 0;
-
-			.button {
-				@include color.palette('neutral');
-				@include button.S;
-			}
 		}
 
 		.callout-icon {

package/src/components/callout/index.scss

@@ -10,13 +10,17 @@
 		&.mod-S {
 			@include S;
 		}
-	}
 
-	&.mod-AI {
-		@include AI;
-	}
+		&.mod-AI {
+			@include AI;
+		}
 
-	&:has(.callout-content-description-actions.mod-inline) {
-		@include actionsInline;
+		&:has(.callout-content-description-actions) {
+			@include actions;
+		}
+
+		&:has(.callout-content-description-actions.mod-inline) {
+			@include actionsInline;
+		}
 	}
 }

package/src/components/callout/mods.scss

@@ -42,6 +42,17 @@
 	}
 }
 
+@mixin actions {
+	.button {
+		@include color.palette('neutral');
+		@include button.S;
+
+		&.mod-onlyIcon {
+			@include button.onlyIconS;
+		}
+	}
+}
+
 @mixin actionsInline {
 	--components-callout-content-description-display: flex;
 	--components-callout-content-description-action-marginBlockStart: 0;
@@ -49,9 +60,9 @@
 
 	.button {
 		@include button.XS;
-	}
 
-	.button.mod-onlyIcon {
-		@include button.onlyIconXS;
+		&.mod-onlyIcon {
+			@include button.onlyIconXS;
+		}
 	}
 }

package/src/components/calloutDisclosure/states.scss

@@ -1,5 +1,5 @@
 @mixin open {
 	.calloutDisclosure-summary-chevron {
-		transform: rotate(-180deg);
+		transform: rotate(180deg);
 	}
 }

package/src/components/container/component.scss

@@ -6,10 +6,5 @@
 	max-inline-size: var(--commons-container-maxWidth);
 	margin-inline: var(--commons-container-marginInline);
 	position: relative;
-	flex-grow: 1;
-	justify-content: space-between;
-	gap: var(--pr-t-spacings-200);
-	display: var(--components-container-display);
-	align-items: var(--components-container-alignItems);
-	flex-direction: var(--components-container-flexDirection);
+	display: block;
 }

package/src/components/container/mods.scss

@@ -30,9 +30,3 @@
 @mixin overflow {
 	--components-container-minInlineSize: fit-content;
 }
-
-@mixin insideFooter {
-	--components-container-display: flex;
-	--components-container-alignItems: var(--components-footer-alignItems);
-	--components-container-flexDirection: var(--components-footer-direction);
-}

package/src/components/container/vars.scss

@@ -2,9 +2,6 @@
 
 @mixin vars($atRoot: namespace.$defaultAtRoot) {
 	--components-container-minInlineSize: 0;
-	--components-container-display: block;
-	--components-container-alignItems: normal;
-	--components-container-flexDirection: column;
 
 	// for this component some variables are placed in root
 

package/src/components/dataTable/mods.scss

@@ -120,6 +120,13 @@
 		@include button.onlyIconS;
 		@include button.ghost;
 
+		// .mod-delete is deprecated
+		&.mod-critical,
+		&.mod-delete {
+			// For specificity purpose. Could be removed if we decide to remove automatic CSS imports in Angular components
+			@include button.critical;
+		}
+
 		transition-property: box-shadow, color;
 	}
 

package/src/components/dialog/component.scss

@@ -136,10 +136,10 @@
 			grid-area: header;
 		}
 
-		.dialog-inside-header-button {
+		.dialog-inside-header-button.button {
 			position: var(--components-dialog-inside-header-button-position);
 			inset-block-start: var(--components-dialog-inside-header-button-insetBlockStart);
-			inset-inline-end: var(--components-dialog-inside-header-button-insetBlockEnd);
+			inset-inline-end: var(--components-dialog-inside-header-button-insetInlineEnd);
 		}
 
 		.dialog-inside-content {

package/src/components/dialog/index.scss

@@ -58,10 +58,6 @@
 			@include fullScreen;
 		}
 
-		&:has(.dialog-inside-header-button) {
-			@include withCloseButton;
-		}
-
 		&:has(.dialog-inside-header-actionOptional:not(:empty)) {
 			@include withAction;
 		}
@@ -78,4 +74,10 @@
 			}
 		}
 	}
+
+	@layer mods {
+		.dialog-inside-header-button.button {
+			@include withCloseButton;
+		}
+	}
 }

package/src/components/dialog/mods.scss

@@ -34,9 +34,9 @@
 	--components-dialog-maxHeight: none;
 	--components-dialog-maxHeightFallback: var(--components-dialog-maxHeight);
 	--components-dialog-height: calc(100% - var(--pr-t-spacings-100) * 2);
-	--components-dialog-maxWidth: calc(100vw - var(--pr-t-spacings-200) - var(--commons-pushPanel-width));
+	--components-dialog-maxWidth: calc(100vw - var(--pr-t-spacings-200) - var(--commons-pushPanel-inlineSize));
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
-	--components-dialog-inset: var(--pr-t-spacings-100) calc(var(--pr-t-spacings-100) + var(--commons-pushPanel-width)) var(--pr-t-spacings-100) auto;
+	--components-dialog-inset: var(--pr-t-spacings-100) calc(var(--pr-t-spacings-100) + var(--commons-pushPanel-inlineSize)) var(--pr-t-spacings-100) auto;
 	--components-dialog-translateX: var(--components-dialog-translate);
 	--components-dialog-translateY: 0;
 	--components-dialog-translate-spacing: calc(var(--pr-t-spacings-500) * 2);
@@ -49,9 +49,9 @@
 	--components-dialog-maxHeight: calc(100dvh - var(--pr-t-spacings-200));
 	--components-dialog-maxHeightFallback: calc(100vh - var(--pr-t-spacings-200));
 	--components-dialog-maxWidth: none;
-	--components-dialog-inset: auto calc(var(--pr-t-spacings-100) + var(--commons-pushPanel-width)) var(--pr-t-spacings-100) var(--pr-t-spacings-100);
+	--components-dialog-inset: auto calc(var(--pr-t-spacings-100) + var(--commons-pushPanel-inlineSize)) var(--pr-t-spacings-100) var(--pr-t-spacings-100);
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
-	--components-dialog-width: calc(100% - var(--pr-t-spacings-100) * 2 - var(--commons-pushPanel-width));
+	--components-dialog-width: calc(100% - var(--pr-t-spacings-100) * 2 - var(--commons-pushPanel-inlineSize));
 	--components-dialog-height: fit-content;
 	--components-dialog-translateX: 0;
 	--components-dialog-translateY: var(--components-dialog-translate);
@@ -80,16 +80,14 @@
 }
 
 @mixin withCloseButton {
-	.dialog-inside-header-button {
-		@include button.ghost;
-		@include button.S;
-		@include button.onlyIconS;
-
-		align-self: start;
-		justify-self: end;
-		grid-area: close;
-		display: var(--components-dialog-insideHeaderButtonDisplay);
-	}
+	@include button.ghost;
+	@include button.S;
+	@include button.onlyIconS;
+
+	align-self: start;
+	justify-self: end;
+	grid-area: close;
+	display: var(--components-dialog-insideHeaderButtonDisplay);
 }
 
 @mixin withAction {
@@ -109,7 +107,7 @@
 	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50) var(--pr-t-spacings-200);
 	--components-dialog-inside-header-button-position: absolute;
 	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-100);
-	--components-dialog-inside-header-button-insetBlockEnd: var(--pr-t-spacings-100);
+	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-100);
 
 	.dialog-inside-footer {
 		@include footer.fancy;

package/src/components/dialog/vars.scss

@@ -2,11 +2,11 @@
 	--components-dialog-size: 40rem;
 	--components-dialog-width: var(--components-dialog-size);
 	--components-dialog-height: fit-content;
-	--components-dialog-maxWidth: calc(100vw - (var(--pr-t-spacings-200) * 2) - var(--commons-pushPanel-width));
+	--components-dialog-maxWidth: calc(100vw - (var(--pr-t-spacings-200) * 2) - var(--commons-pushPanel-inlineSize));
 	--components-dialog-maxHeight: calc(100dvh - (var(--pr-t-spacings-200) * 2));
 	--components-dialog-maxHeightFallback: calc(100vh - (var(--pr-t-spacings-200) * 2));
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
-	--components-dialog-inset: 0 var(--commons-pushPanel-width) 0 0;
+	--components-dialog-inset: 0 var(--commons-pushPanel-inlineSize) 0 0;
 	--components-dialog-animationOpening: scaleIn;
 	--components-dialog-insideHeaderAreas: 'container close';
 	--components-dialog-insideHeaderTitleAlign: left;
@@ -34,5 +34,5 @@
 	--components-dialog-inside-alignContent: normal;
 	--components-dialog-inside-fancyIllustrations-inlineSize: var(--components-dialog-inside-paddingInlineEnd);
 	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-200);
-	--components-dialog-inside-header-button-insetBlockEnd: var(--pr-t-spacings-300);
+	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-300);
 }

package/src/components/emptyState/mods.scss

@@ -60,7 +60,6 @@
 }
 
 @mixin insideContainer {
-	--components-emptyState-container-maxWidth: none;
 	--components-emptyState-container-left: auto;
 }
 

package/src/components/fileEntry/index.scss

@@ -36,3 +36,9 @@
 		}
 	}
 }
+
+.fileEntry-description-divider.divider.mod-vertical {
+	@layer mods {
+		@include divider;
+	}
+}

package/src/components/fileEntry/mods.scss

@@ -35,3 +35,8 @@
 	--components-fileEntry-status-blockSize: auto;
 	--components-fileEntry-status-aspectRatio: 1;
 }
+
+@mixin divider {
+	--components-divider-marginBlock: var(--pr-t-spacings-25);
+	--components-divider-marginInline: 0;
+}

package/src/components/fileToolbar/component.scss

@@ -1,8 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/commons/utils/reset';
 
-@use '@lucca-front/scss/src/components/button/exports' as button;
-
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
@@ -24,12 +22,5 @@
 			gap: var(--pr-t-spacings-50);
 			padding: var(--components-fileToolbar-list-padding);
 		}
-
-		.fileToolbar-list-item-button.button {
-			@include button.ghost;
-			@include button.S;
-
-			--components-button-padding: var(--pr-t-spacings-75) !important;
-		}
 	}
 }

package/src/components/fileToolbar/index.scss

@@ -15,4 +15,10 @@
 			}
 		}
 	}
+
+	@layer mods {
+		.fileToolbar-list-item-button.button {
+			@include button;
+		}
+	}
 }

package/src/components/fileToolbar/mods.scss

@@ -7,3 +7,11 @@
 @mixin disablePositioningS {
 	--components-fileToolbar-list-padding: 0;
 }
+
+@mixin button {
+	@include button.ghost;
+	@include button.S;
+
+	--components-button-borderRadius: 4px;
+	--components-button-padding: var(--pr-t-spacings-75);
+}

package/src/components/filterPill/states.scss

@@ -79,7 +79,7 @@
 }
 
 @mixin opened {
-	--components-filterPill-toggle-rotation: -0.5turn;
+	--components-filterPill-toggle-rotation: 180deg;
 }
 
 @mixin beginning {

package/src/components/filterPill/vars.scss

@@ -12,7 +12,7 @@
 	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-700);
 	--components-filterPill-checkbox-icon-scale: 0;
 	--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(0.5, -0.5, 0.5, 0);
-	--components-filterPill-toggle-rotation: 0;
+	--components-filterPill-toggle-rotation: 0deg;
 	--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);
 	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);
 	--components-filterPill-display: flex;

package/src/components/footer/component.scss

@@ -4,15 +4,15 @@
 	background-color: var(--components-footer-backgroundColor);
 	padding-block: var(--components-footer-paddingBlock);
 	padding-inline: var(--components-footer-paddingInline);
-	display: flex;
-	justify-content: space-between;
-	gap: var(--pr-t-spacings-200);
-	align-items: var(--components-footer-alignItems);
 	box-shadow: var(--components-footer-boxShadow);
 	inset-block-end: 0;
 	position: var(--components-footer-position);
-	flex-direction: var(--components-footer-direction);
 	overflow: var(--components-footer-overflow);
+	display: var(--components-footer-display);
+	justify-content: var(--components-footer-justifyContent);
+	gap: var(--components-footer-gap);
+	align-items: var(--components-footer-alignItems);
+	flex-direction: var(--components-footer-direction);
 
 	@at-root ($atRoot) {
 		.footer-content {
@@ -25,5 +25,16 @@
 			gap: var(--pr-t-spacings-150);
 			flex-direction: var(--components-footer-direction);
 		}
+
+		.footer-containerOptional {
+			flex-grow: 1;
+			display: var(--components-footer-display);
+			justify-content: var(--components-footer-justifyContent);
+			gap: var(--components-footer-gap);
+			align-items: var(--components-footer-alignItems);
+			flex-direction: var(--components-footer-direction);
+			padding: var(--commons-container-padding);
+			max-inline-size: var(--components-footer-container-maxInlineSize);
+		}
 	}
 }

package/src/components/footer/index.scss

@@ -1,5 +1,7 @@
 @use 'exports' as *;
 @use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/function';
+@use '@lucca-front/scss/src/commons/config';
 
 .footer {
 	@layer components {
@@ -54,5 +56,11 @@
 		&:has(.footer-containerOptional) {
 			@include withContainer;
 		}
+
+		@each $breakpoint, $value in config.$breakpoints {
+			.footer-containerOptional.mod-containerMax#{$breakpoint} {
+				@include withContainerMax(function.pxToRem($value));
+			}
+		}
 	}
 }

package/src/components/footer/mods.scss

@@ -29,8 +29,8 @@
 
 @mixin withContainer {
 	--components-footer-paddingInline: 0;
+}
 
-	.footer-containerOptional {
-		@include container.insideFooter;
-	}
+@mixin withContainerMax($breakpoint) {
+	--components-footer-container-maxInlineSize: #{$breakpoint};
 }

package/src/components/footer/vars.scss

@@ -8,4 +8,8 @@
 	--components-footer-boxShadow: var(--pr-t-elevation-shadow-overflow);
 	--components-footer-overflow: visible;
 	--components-footer-backgroundColor: var(--pr-t-elevation-surface-raised);
+	--components-footer-justifyContent: space-between;
+	--components-footer-gap: var(--pr-t-spacings-200);
+	--components-footer-display: flex;
+	--components-footer-container-maxInlineSize: var(--commons-container-maxWidth);
 }

package/src/components/gauge/component.scss

@@ -39,7 +39,7 @@
 			stroke-width: var(--components-gauge-circle-strokeWidth);
 			stroke-linecap: round;
 			stroke-dashoffset: 0;
-			transform: rotate(-0.25turn);
+			transform: rotate(270deg);
 			transform-origin: 50% 50%;
 			stroke-dasharray: calc(var(--components-gauge-circleP) / 100 * var(--components-gauge-value)), 9999;
 			stroke: currentColor;

package/src/components/indexTable/component.scss

@@ -234,6 +234,7 @@
 			gap: var(--pr-t-spacings-100);
 			padding: var(--pr-t-spacings-25);
 			font-weight: var(--pr-t-font-fontWeight-semibold);
+			inline-size: fit-content;
 		}
 
 		.indexTable-body-row-cellTitle-title {
@@ -261,11 +262,6 @@
 				padding-inline: 0;
 				margin-inline-end: var(--pr-t-spacings-100);
 			}
-
-			.pagination-scrolling .button:hover {
-				--components-button-backgroundColor: var(--palettes-neutral-100);
-				--components-button-color: var(--palettes-neutral-700);
-			}
 		}
 	}
 

package/src/components/indexTable/index.scss

@@ -105,3 +105,11 @@
 		}
 	}
 }
+
+.indexTableWrapper {
+	@layer mods {
+		.pagination-scrolling .button:hover {
+			@include paginationHover;
+		}
+	}
+}

package/src/components/indexTable/mods.scss

@@ -407,5 +407,6 @@
 		content: '';
 		position: absolute;
 		inset: 0;
+		z-index: 1;
 	}
 }

package/src/components/indexTable/states.scss

@@ -83,3 +83,8 @@
 @mixin rowsHidden {
 	--components-indexTable-row-display: none;
 }
+
+@mixin paginationHover {
+	--components-button-backgroundColor: var(--palettes-neutral-100);
+	--components-button-color: var(--palettes-neutral-700);
+}

package/src/components/multiSelect/states.scss

@@ -25,7 +25,7 @@
 
 @mixin expanded {
 	.multipleSelect-arrow {
-		transform: rotate(-180deg);
+		transform: rotate(180deg);
 	}
 }
 

package/src/components/navside/states.scss

@@ -9,7 +9,7 @@
 
 @mixin expanded {
 	.navSide-item-arrow {
-		transform: rotate(-90deg);
+		transform: rotate(270deg);
 	}
 }
 

package/src/components/pagination/index.scss

@@ -6,8 +6,8 @@
 		@include component;
 	}
 
-	@layer components {
-		&.mod-mods {
+	@layer mods {
+		&.mod-compact {
 			@include compact;
 		}
 	}

package/src/components/simpleSelect/states.scss

@@ -27,7 +27,7 @@
 	}
 
 	.simpleSelect-field-icon {
-		transform: rotate(-180deg);
+		transform: rotate(180deg);
 	}
 }
 

package/src/components/table/mods.scss

@@ -183,7 +183,7 @@
 		.table-body-row-cell,
 		.table-foot-row-cell {
 			&::before {
-				transform: rotate(-180deg);
+				transform: rotate(180deg);
 			}
 		}
 	}